Boucle dans React JSX

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

<tbody>
    for (var i=0; i < numrows; i++) {
        <ObjectRow/>
    } 
</tbody>

Je réalise et comprends pourquoi ce n'est pas un JSX valide, puisque JSX correspond à des appels de fonction. Cependant, comme je viens du monde des modèles et que je suis novice en matière de JSX, je ne sais pas comment je pourrais réaliser ce qui précède (ajouter un composant plusieurs fois).

ravibagul91
Question modifiée 30 mai 2019 в 9:51
Programmation
javascript reactjs
5 avril 2014 в 5:29
15 vues
Solution

Pensez-y comme si vous appeliez simplement des fonctions JavaScript. Vous ne pouvez pas utiliser une boucle for où iraient les arguments d'un appel de fonction :

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

Vous voyez que la fonction tbody reçoit une boucle for comme argument, et bien sûr, c'est une erreur de syntaxe.

Mais vous pouvez créer un tableau, et le passer comme argument :

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

Vous pouvez utiliser fondamentalement la même structure lorsque vous travaillez avec JSX :

var rows = [];
for (var i = 0; i < numrows; i++) {
    // note: we add 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();
}
return <tbody>{rows}</tbody>;

D'ailleurs, mon exemple JavaScript est presque exactement ce en quoi cet exemple de JSX se transforme. Jouez avec [Babel REPL] (https://babeljs.io/repl) pour vous faire une idée du fonctionnement de JSX.

temporary_user_name
Réponse modifiée 29 janvier 2019 в 1:21
Commentaires (18)

Je ne suis pas sûr que cela convienne à votre situation, mais souvent [map][1] est une bonne réponse.

Si c'était votre code avec la boucle for :

<tbody>
    for (var i=0; i < objects.length; i++) {

    } 
</tbody>

Vous pourriez l'écrire comme ceci avec [map][1] :

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

Syntaxe ES6 :

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

[1] : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Remco Haszing
Réponse modifiée 5 mars 2018 в 2:41
Commentaires (11)

Je sais que c'est un vieux sujet, mais vous pourriez vouloir vérifier [React Templates][1], qui vous permet d'utiliser des modèles de style jsx dans react, avec quelques directives (comme rt-repeat).

Votre exemple, si vous avez utilisé react-templates, serait :

<tbody>

</tbody>

[1] : http://wix.github.io/react-templates/

Rich Warrior
Réponse modifiée 14 août 2019 в 9:01
Commentaires (1)