Jag försöker göra något som liknar följande i React JSX
(där ObjectRow är en separat komponent):
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
Jag inser och förstår varför detta inte är giltigt JSX
, eftersom JSX
mappar till funktionsanrop. Men eftersom jag kommer från mallland och är ny i JSX
är jag osäker på hur jag skulle uppnå ovanstående (lägga till en komponent flera gånger).
Tänk på det som om du bara anropar JavaScript-funktioner. Du kan inte använda en for
-slinga där argumenten till ett funktionsanrop skulle hamna:
return tbody(
for (var i = 0; i < numrows; i++) {
ObjectRow()
}
)
Se hur funktionen tbody
skickas till en for
-slinga som argument, och det är naturligtvis ett syntaxfel.
Men du kan skapa en array och sedan skicka in den som ett argument:
var rows = [];
for (var i = 0; i < numrows; i++) {
rows.push(ObjectRow());
}
return tbody(rows);
Du kan använda i princip samma struktur när du arbetar med 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>;
För övrigt är mitt JavaScript-exempel nästan exakt det som JSX-exemplet omvandlas till. Lek lite med Babel REPL för att få en känsla för hur JSX fungerar.
Jag är inte säker på att detta fungerar i din situation, men ofta är map ett bra svar.
Om detta var din kod med for-slingan:
<tbody>
for (var i=0; i < objects.length; i++) {
<ObjectRow obj={objects[i]} key={i}>
}
</tbody>
Du skulle kunna skriva den så här med 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>
Jag vet att det här är en gammal tråd, men du kanske vill kolla in React Templates, som låter dig använda jsx-mallar i react, med några få direktiv (t.ex. rt-repeat).
Ditt exempel, om du använde react-templates, skulle vara:
<tbody>
<ObjectRow rt-repeat="obj in objects"/>
</tbody>