Snažím se v Reactu JSX
(kde ObjectRow je samostatná komponenta) udělat něco jako následující:
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
Uvědomuji si a chápu, proč to není platné JSX
, protože JSX
mapuje volání funkcí. Nicméně, protože pocházím ze země šablon a jsem v JSX
nováčkem, nejsem si jistý, jak bych výše uvedeného dosáhl (přidání komponenty vícekrát).
Představte si to, jako byste volali funkce JavaScriptu. Nemůžete použít smyčku for
, do které by šly argumenty volání funkce:
return tbody(
for (var i = 0; i < numrows; i++) {
ObjectRow()
}
)
Podívejte se, jak se funkci tbody
předává jako argument smyčka for
, což je samozřejmě syntaktická chyba.
Ale můžete vytvořit pole a to pak předat jako argument:
var rows = [];
for (var i = 0; i < numrows; i++) {
rows.push(ObjectRow());
}
return tbody(rows);
V podstatě stejnou strukturu můžete použít při 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>;
Mimochodem, můj příklad JavaScriptu je téměř přesně to, na co se transformuje tento příklad JSX. Pohrajte si s Babel REPL, abyste získali představu o tom, jak JSX funguje.
Nejsem si jistý, zda to bude fungovat ve vaší situaci, ale často je mapa dobrou odpovědí.
Pokud by to byl váš kód se smyčkou for:
<tbody>
for (var i=0; i < objects.length; i++) {
<ObjectRow obj={objects[i]} key={i}>
}
</tbody>
Mohli byste to napsat takto s map:
<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>
Vím, že je to staré vlákno, ale možná byste se měli podívat na React Templates, které vám umožní používat v Reactu šablony ve stylu jsx s několika direktivami (například rt-repeat).
Tvůj příklad, pokud bys použil react-templates, by byl:
<tbody>
<ObjectRow rt-repeat="obj in objects"/>
</tbody>