Jeg prøver å gjøre noe som følgende i React JSX
(der ObjectRow er en egen komponent):
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
Jeg skjønner og forstår hvorfor dette ikke er gyldig JSX
, siden JSX
kart til funksjonskall. Men, kommer fra mal land og er ny til JSX
, er jeg usikker på hvordan jeg ville oppnå det ovennevnte (legge til en komponent flere ganger).
Tenk på det som om du bare kaller JavaScript-funksjoner. Du kan ikke bruke en for
løkke der argumentene til et funksjonskall vil gå:
return tbody(
for (var i = 0; i < numrows; i++) {
ObjectRow()
}
)
Se hvordan funksjonen tbody
blir sendt en for
løkke som et argument, og selvfølgelig er det en syntaksfeil.
Men du kan lage et array, og deretter sende det inn som et argument:
var rows = [];
for (var i = 0; i < numrows; i++) {
rows.push(ObjectRow());
}
return tbody(rows);
Du kan i utgangspunktet bruke den samme strukturen når du arbeider 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>;
Forresten, min JavaScript eksempel er nesten nøyaktig hva som eksempel på JSX forvandles til. Lek deg med Babel REPL for å få en følelse av hvordan JSX fungerer.
Jeg er ikke sikker på om dette vil fungere i din situasjon, men ofte er kart et godt svar.
Hvis dette var koden din med for-sløyfen:
<tbody>
for (var i=0; i < objects.length; i++) {
<ObjectRow obj={objects[i]} key={i}>
}
</tbody>
Du kan skrive det slik med map:
<tbody>
{objects.map(function(object, i){
return <ObjectRow obj={object} key={i} />;
})}
</tbody>
ES6-syntaks:
<tbody>
{objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>
Jeg vet at dette er en gammel tråd, men det kan være lurt å sjekke ut React Templates, som lar deg bruke jsx-stil maler i react, med noen få direktiver (for eksempel rt-repeat).
Ditt eksempel, hvis du brukte react-templates, ville være:
<tbody>
<ObjectRow rt-repeat="obj in objects"/>
</tbody>