Sløyfe i React JSX

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).

ravibagul91
Redigerte spørsmål 30. mai 2019 в 9:51
Programmering
javascript reactjs
5. april 2014 в 5:29
6 visninger
Løsning

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();
}
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.

temporary_user_name
Redigert svar 29. januar 2019 в 1:21
Kommentarer (18)

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++) {

    } 
</tbody>

Du kan skrive det slik med map:

<tbody>
    {objects.map(function(object, i){
        return ;
    })}
</tbody>

ES6-syntaks:

<tbody>
    {objects.map((object, i) => )}
</tbody>
Remco Haszing
Redigert svar 5. mars 2018 в 2:41
Kommentarer (11)

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>

</tbody>
Rich Warrior
Redigert svar 14. august 2019 в 9:01
Kommentarer (1)