Boucle interne React JSX
P粉966979765
2023-08-23 14:08:12
<p>J'essaie de faire quelque chose comme ce qui suit dans React JSX (où ObjectRow est un composant distinct) : </p>
<pre class="brush:php;toolbar:false;"><tbody>
pour (var i=0; i < nombres; i++) {
<LigneObjet/>
}
</tbody></pre>
<p>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). </p>
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 :
Vous pouvez utiliser map pour écrire comme ceci一> :
Syntaxe ES6 :
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 :Voyez comment la fonction
tbody
est passée en argument à la boucletbody
如何作为参数传递给for
, provoquant une erreur de syntaxe.Mais vous pouvez créer un tableau et le passer en paramètre :
Vous utilisez essentiellement la même structure lorsque vous utilisez JSX :
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.