Boucle interne React JSX
P粉966979765
P粉966979765 2023-08-23 14:08:12
0
2
528
<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>
P粉966979765
P粉966979765

répondre à tous(2)
P粉609866533

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>
P粉937769356

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.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal