Опитвам се да направя нещо подобно на следното в React JSX
(където ObjectRow е отделен компонент):
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
Осъзнавам и разбирам защо това не е валидно за JSX
, тъй като JSX
се съпоставя с извиквания на функции. Въпреки това, идвайки от страната на шаблоните и бидейки нов в JSX
, не съм сигурен как бих постигнал горното (добавянето на компонент няколко пъти).
Мислете за това така, сякаш просто извиквате функции на 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(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;
Между другото, моят пример с JavaScript е почти точно това, в което се превръща този пример с JSX. Поиграйте си с Babel REPL, за да разберете как работи JSX.
Не съм сигурен дали това ще е подходящо за вашата ситуация, но често map е добър отговор.
Ако това беше вашият код с цикъла for:
<tbody>
for (var i=0; i < objects.length; i++) {
<ObjectRow obj={objects[i]} key={i}>
}
</tbody>
Бихте могли да го напишете по следния начин с map:
<tbody>
{objects.map(function(object, i){
return <ObjectRow obj={object} key={i} />;
})}
</tbody>
ES6 синтаксис:
<tbody>
{objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>
Знам, че това е стара тема, но може би ще искате да разгледате React Templates, което ви позволява да използвате jsx-стил шаблони в react, с няколко директиви (като rt-repeat).
Вашият пример, ако използвате react-templates, би бил:
<tbody>
<ObjectRow rt-repeat="obj in objects"/>
</tbody>