Bandau padaryti kažką panašaus į tai, kas išdėstyta "React `JSX" (kur "ObjectRow" yra atskiras komponentas):
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
Aš suprantu ir suprantu, kodėl tai negalioja JSX
, nes JSX
atvaizduoja funkcijų iškvietimus. Tačiau, kadangi esu kilęs iš šablonų srities ir esu naujokas JSX
, nesu tikras, kaip galėčiau pasiekti tai, kas išdėstyta pirmiau (pridėti komponentą kelis kartus).
Galvokite apie tai taip, tarsi tiesiog skambintumėte "JavaScript" funkcijoms. Negalite naudoti for
ciklo, į kurį patektų funkcijos iškvietimo argumentai:
return tbody(
for (var i = 0; i < numrows; i++) {
ObjectRow()
}
)
Pažiūrėkite, kaip funkcijai tbody
kaip argumentas perduodamas for
ciklas, ir tai, žinoma, yra sintaksės klaida.
Tačiau galite sukurti masyvą ir perduoti jį kaip argumentą:
var rows = [];
for (var i = 0; i < numrows; i++) {
rows.push(ObjectRow());
}
return tbody(rows);
Iš esmės tokią pačią struktūrą galite naudoti ir dirbdami su 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(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;
Beje, mano "JavaScript" pavyzdys beveik tiksliai atitinka tai, į ką transformuojasi šis JSX pavyzdys. Žaiskite su Babel REPL, kad pajustumėte, kaip veikia JSX.
Nesu tikras, ar tai tiks jūsų atveju, bet dažnai žemėlapis yra geras atsakymas.
Jei tai būtų jūsų kodas su for ciklu:
<tbody>
for (var i=0; i < objects.length; i++) {
<ObjectRow obj={objects[i]} key={i}>
}
</tbody>
Jūs galėtumėte jį parašyti taip: žemėlapis:
<tbody>
{objects.map(function(object, i){
return <ObjectRow obj={object} key={i} />;
})}
</tbody>
ES6 sintaksė:
<tbody>
{objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>
Žinau, kad tai sena gija, bet galbūt norėsite patikrinti React Templates, kuri leidžia naudoti jsx stiliaus šablonus React, su keliomis direktyvomis (pvz., rt-repeat).
Jūsų pavyzdys, jei naudotumėte react-templates, būtų toks:
<tbody>
<ObjectRow rt-repeat="obj in objects"/>
</tbody>