Snažím sa v Reacte JSX
(kde ObjectRow je samostatná komponenta) urobiť niečo podobné:
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
Uvedomujem si a chápem, prečo to nie je platné JSX
, pretože JSX
mapuje volania funkcií. Keďže však pochádzam z krajiny šablón a som nováčikom v JSX
, nie som si istý, ako by som dosiahol vyššie uvedené (viacnásobné pridanie komponenty).
Predstavte si to tak, ako keby ste volali funkcie JavaScriptu. Nemôžete'použiť cyklus for
, do ktorého by išli argumenty volania funkcie:
return tbody(
for (var i = 0; i < numrows; i++) {
ObjectRow()
}
)
Vidíte, ako sa funkcii tbody
odovzdáva ako argument cyklus for
, a to je samozrejme syntaktická chyba.
Ale môžete vytvoriť pole a potom ho odovzdať ako argument:
var rows = [];
for (var i = 0; i < numrows; i++) {
rows.push(ObjectRow());
}
return tbody(rows);
V podstate rovnakú štruktúru môžete použiť aj pri práci s 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>;
Mimochodom, môj príklad JavaScriptu je takmer presne to, na čo sa transformuje tento príklad JSX. Pohrajte sa s Babel REPL, aby ste získali pocit, ako JSX funguje.
Nie som si istý, či to bude fungovať vo vašej situácii, ale často je mapa dobrou odpoveďou.
Ak by to bol váš kód s cyklom for:
<tbody>
for (var i=0; i < objects.length; i++) {
<ObjectRow obj={objects[i]} key={i}>
}
</tbody>
Mohli by ste to napísať takto s map:
<tbody>
{objects.map(function(object, i){
return <ObjectRow obj={object} key={i} />;
})}
</tbody>
ES6 syntax:
<tbody>
{objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>
Viem, že je to staré vlákno, ale možno by ste sa mali pozrieť na React Templates, ktoré vám umožňuje používať šablóny v štýle jsx v React, s niekoľkými direktívami (napríklad rt-repeat).
Váš príklad, ak by ste použili react-templates, by bol:
<tbody>
<ObjectRow rt-repeat="obj in objects"/>
</tbody>