1
votes

Réagir le rendu du bootstrap de manière conditionnelle en fonction de l'index de la carte

Je crée une grille à 4 colonnes avec react-bootstrap et je souhaite rendre une balise à chaque itération idx% 4 == 0, et une chaque idx% 4 == 3 itération

render(){

   {items.map( (item, idx) => (
       idx%4==0? <Row> : '' 

       <Col key={item} lg={3}>
            ....
       <Col>

       idx%4==3? </Row> : ''

    }
}

Est-il possible de faire cela? Je n'arrive pas à faire une balise d'ouverture toute seule sans balise de fermeture

Ou devrais-je en couper 4 à la fois et essayer de le rendre?

reactjs react-bootstrap

5 commentaires

Oui, faire les choses de cette façon est bien

cela ne fonctionne pas - il n'aime pas qu'une seule balise - nécessite une fermeture aussi la syntaxe a une erreur sur laquelle je demande de l'aide.

Oh accroche, je t'ai mal compris, non tu ne peux pas rendre les balises JSX sans les fermer

@Ryan vient de vous écrire une réponse, faites-moi savoir si cela vous aide.

Essayez peut-être des fragments au lieu des citations vides

4 Réponses :

1
votes

Vous devriez essayer d'organiser votre syntaxe et vos opérateurs ternaires comme ceci afin d'avoir une meilleure image de ce qui se passe:

render(){
  {items.map((item, idx) => {
    return(
      idx % 4 == 0 ? (
        <Row>
          <Col>Hello</Col>
        </Row>
      ) : (
        idx % 4 == 3 ? (
          <Row>
            <Col>Different type of hello</Col>
          </Row>
        ) : (
          null
        )
      )
    )
  })}
}

De cette façon, votre carte est un peu plus propre, générant des lignes complètement différentes au lieu d'essayer de tout imbriquer dans une seule condition.

1 commentaires

@Ryan, heureux que vous soyez d'accord. Avez-vous de la chance pour mettre en œuvre ce que vous voulez? Je suis heureux de vous aider si nécessaire.

2
votes

Je pense que vous avez la bonne idée. Vous pouvez le nettoyer en utilisant votre vérification d'index && pour effectuer un rendu conditionnel au lieu du ternaire -

{items.map( (item, idx) => (
   {idx % 4 == 0 && <Row>}

     <Col key={item} lg={3}>
        ....
     <Col>

   {idx % 4 == 3 && </Row>}
}

0 commentaires

1
votes

Si React, vous devez rendre (ou retourner) un composant complet, mais vous pouvez faire quelque chose comme ceci pour regrouper les composants et renvoyer le groupe complet enveloppé par la Row :

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

0 commentaires

1
votes

Vous pouvez créer d'abord le tableau Col , puis dans la deuxième itération, créer des lignes

render() {
    const cols = items.map( (item, idx) => ( 

       <Col key={item} lg={3}>
            ....
       <Col>
       );
       
    const noRows =  Math.ceil(items.length / 4);

    const rows = Array.from(Array(noRows)).map((n, i) =>(
      <Row>
       {cols.slice(i* 4, (i + 1)* 4)}
      </Row>
    ));

    return rows;
}

2 commentaires

Merci! C'est exactement ce dont j'avais besoin - et c'est un peu plus facile à lire que la réponse reduction ().

Génial, si vous avez une dépendance lodash, alors _.range (noRows), map () réduira un peu le code :)