Boucle interne React JSX

Question

J'essaie de faire quelque chose comme ce qui suit dans React JSX (où ObjectRow est un composant distinct) :

<tbody>
    pour (var i=0; i < nombres; i++) {
        <LigneObjet/>
    }
</tbody>

Je réalise et comprends pourquoi ce n'est pas un JSX valide, puisque JSX correspond aux appels de fonction. Cependant, venant du monde des modèles et nouveau sur JSX, je ne sais pas comment atteindre l'objectif ci-dessus (ajouter plusieurs fois des composants).

Answer 1

Je ne sais pas si cela convient à votre situation, mais généralement map est une bonne réponse.

S'il s'agit de votre code utilisant une boucle for :

<tbody>
    for (var i=0; i < objects.length; i++) {
        <ObjectRow obj={objects[i]} key={i}>
    }
</tbody>

Vous pouvez utiliser map pour écrire comme ceci :

<tbody>
    {objects.map(function(object, i){
        return <ObjectRow obj={object} key={i} />;
    })}
</tbody>

Syntaxe ES6 :

<tbody>
    {objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>

Answer 2

Pensez-y comme si vous appeliez simplement une fonction JavaScript. Vous ne pouvez pas utiliser une boucle for pour passer des arguments à un appel de fonction :

return tbody(
    for (let i = 0; i < numrows; i++) {
        ObjectRow()
    } 
)

Voyez comment la fonction tbody est passée en argument à la boucle tbody 如何作为参数传递给 for, provoquant une erreur de syntaxe.

Mais vous pouvez créer un tableau et le passer en paramètre :

const rows = [];
for (let i = 0; i < numrows; i++) {
    rows.push(ObjectRow());
}
return tbody(rows);

---

Vous utilisez essentiellement la même structure lorsque vous utilisez JSX :

const rows = [];
for (let i = 0; i < numrows; i++) {
    // note: we are adding a key prop here to allow react to uniquely identify each
    // element in this array. see: https://reactjs.org/docs/lists-and-keys.html
    rows.push(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;

Au fait, mon exemple JavaScript convertit presque exactement la même chose que l'exemple JSX. Essayez d'utiliser Babel REPL pour avoir une idée du fonctionnement de JSX.