Вам нужно сначала подготовить набор элементов для отображения, а уже потом выводить их в DOM-дереве через ReactDOM.render
. Если вы не используете JSX, то ваш код может выглядеть так:
// Генерируем массив элементов для отображения.
var children = [];
for (var i = 1; i < 5; i++) {
children.push(React.createElement('div', null, i));
}
// Отрисовываем элементы в DOM.
ReactDOM.render(
React.createElement('div', null, children),
document.getElementById('container')
);
А вот и рабочий пример на JSFiddle.
Если вам нужно отрисовать некий, заранее существующий массив в DOM, то вместо цикла for
можно использовать функцию Array.prototype.map
:
var items = [1, 2, 3, 4];
ReactDOM.render(
React.createElement('div', null, items.map(function(item) {
return React.createElement('div', null, item);
})),
document.getElementById('container')
);
Ну а если вы используете JSX (и ES6), то код можно записать еще элегантнее:
const items = [1, 2, 3, 4];
ReactDOM.render(
(<div>{items.map(item => <div>{item}</div>)}</div>),
document.getElementById('container')
);