Slinga i React JSX

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

ravibagul91
Redigerad fråga 2019ör maj 2019 в 9:51
Programmering
javascript reactjs
2014ör april 2014 в 5:29
11 visningar
Lösning

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

temporary_user_name
Redigerat svar 2019ör januari 2019 в 1:21
Kommentarer (18)

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

    } 
</tbody>

Du skulle kunna skriva den så här med map:

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

ES6-syntax:

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

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>

</tbody>
Rich Warrior
Redigerat svar 2019ör augusti 2019 в 9:01
Kommentarer (1)