V Reactu JSX
(kjer je ObjectRow ločena komponenta) poskušam narediti nekaj podobnega:
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
Zavedam se in razumem, zakaj to ni veljavno JSX
, saj JSX
prikazuje klice funkcij. Ker pa prihajam iz dežele predlog in sem novinec v JSX
, ne vem, kako bi dosegel zgoraj navedeno (večkratno dodajanje komponente).
Razmišljajte o tem, kot da bi klicali funkcije JavaScript. Ne morete uporabiti zanke for
, v katero bi šli argumenti za klic funkcije:
return tbody(
for (var i = 0; i < numrows; i++) {
ObjectRow()
}
)
Oglejte si, kako je funkciji tbody
kot argument posredovana zanka for
, kar je seveda sintaktična napaka.
Lahko pa ustvarite polje in ga nato posredujete kot argument:
var rows = [];
for (var i = 0; i < numrows; i++) {
rows.push(ObjectRow());
}
return tbody(rows);
Pri delu z JSX lahko uporabite enako strukturo:
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(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;
Mimogrede, moj primer JavaScript je skoraj točno to, v kar se pretvori ta primer JSX. Igrajte se z Babel REPL, da dobite občutek, kako deluje JSX.
Nisem prepričan, ali bo to delovalo v vašem primeru, vendar je pogosto zemljevid dober odgovor.
Če bi bila to vaša koda z zanko for:
<tbody>
for (var i=0; i < objects.length; i++) {
<ObjectRow obj={objects[i]} key={i}>
}
</tbody>
Lahko bi jo zapisali takole z map:
<tbody>
{objects.map(function(object, i){
return <ObjectRow obj={object} key={i} />;
})}
</tbody>
Sintaksa ES6:
<tbody>
{objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>
Vem, da je to stara nit, vendar bi morda želeli preveriti React Templates, ki vam omogoča uporabo predlog v slogu jsx v Reactu z nekaj direktivami (kot je rt-repeat).
Vaš primer, če bi uporabili react-templates, bi bil:
<tbody>
<ObjectRow rt-repeat="obj in objects"/>
</tbody>