Цикъл в React JSX

Опитвам се да направя нещо подобно на следното в React JSX (където ObjectRow е отделен компонент):

<tbody>
    for (var i=0; i < numrows; i++) {
        <ObjectRow/>
    } 
</tbody>

Осъзнавам и разбирам защо това не е валидно за JSX, тъй като JSX се съпоставя с извиквания на функции. Въпреки това, идвайки от страната на шаблоните и бидейки нов в JSX, не съм сигурен как бих постигнал горното (добавянето на компонент няколко пъти).

ravibagul91
Редактиран въпрос Направете май 2019 в 9:51
Програмиране
javascript reactjs
Направете април 2014 в 5:29
13 изгледи
Решение

Мислете за това така, сякаш просто извиквате функции на JavaScript. Не можете да използвате цикъла for, в който биха отишли аргументите за извикване на функция:

return tbody(
    for (var i = 0; i < numrows; i++) {
        ObjectRow()
    } 
)

Виждате как на функцията tbody се подава цикъл for като аргумент и това, разбира се, е синтактична грешка.

Но можете да създадете масив и да го подадете като аргумент:

var rows = [];
for (var i = 0; i < numrows; i++) {
    rows.push(ObjectRow());
}
return tbody(rows);

Можете да използвате по принцип същата структура при работа с 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>;

Между другото, моят пример с JavaScript е почти точно това, в което се превръща този пример с JSX. Поиграйте си с Babel REPL, за да разберете как работи JSX.

temporary_user_name
Редактиран отговор Направете януари 2019 в 1:21
Коментари (18)

Не съм сигурен дали това ще е подходящо за вашата ситуация, но често map е добър отговор.

Ако това беше вашият код с цикъла for:

<tbody>
    for (var i=0; i < objects.length; i++) {

    } 
</tbody>

Бихте могли да го напишете по следния начин с map:

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

ES6 синтаксис:

<tbody>
    {objects.map((object, i) => )}
</tbody>
Remco Haszing
Редактиран отговор Направете март 2018 в 2:41
Коментари (11)

Знам, че това е стара тема, но може би ще искате да разгледате React Templates, което ви позволява да използвате jsx-стил шаблони в react, с няколко директиви (като rt-repeat).

Вашият пример, ако използвате react-templates, би бил:

<tbody>

</tbody>
Rich Warrior
Редактиран отговор Направете август 2019 в 9:01
Коментари (1)