Як циклічно та візуалізувати елементи в React.js без масиву об’єктів для відображення?

Я намагаюся перетворити компонент jQuery в React.js, і однією з речей, з якими я зіткнувся, є надання n кількості елементів на основі циклу for.

Я розумію, що це неможливо або не рекомендується, і там, де в моделі існує масив, це має повний сенс використовувати map. Це добре, але що робити, коли у вас немає масиву? Натомість у вас є числове значення, яке прирівнюється до заданої кількості елементів для візуалізації, то що робити?

Ось мій приклад, я хочу встановити префікс елемента з довільною кількістю проміжок тегів на основі його ієрархічного рівня. Отже, на рівні 3 я хочу 3 тегів прольоту перед текстовим елементом.

У JavaScript:

for (var i = 0; i < level; i++) {
    $el.append('<span class="indent"></span>');
}
$el.append('Some text value');

Я не можу зрозуміти, що це чи щось подібне до роботи в компоненті JSX React.js. Натомість мені довелося виконати наступне: спочатку побудуйте тимчасовий масив до потрібної довжини, а потім обведіть масив.

React.js

render: function() {
  var tmp = [];
  for (var i = 0; i < this.props.level; i++) {
    tmp.push(i);
  }
  var indents = tmp.map(function (i) {
    return (
      <span className='indent'></span>
    );
  });

  return (
    ...
    {indents}
    "Some text value"
    ...
  );
}

Звичайно, це не може бути найкращим чи єдиним способом цього досягти? Що я пропускаю?

Оновлено: Станом на Реакція> 0,16

Метод візуалізації не обов'язково повинен повертати один елемент. Масив також можна повернути.

var indents = [];
for (var i = 0; i < this.props.level; i++) {
  indents.push(<span className='indent' key={i}></span>);
}
return indents;

АБО

return this.props.level.map((item, index) => (
    <span className="indent" key={index}>
        {index}
    </span>
));

Документи тут пояснюють дітей JSX

СТАРИЙ:

Ви можете використовувати один цикл замість цього

var indents = [];
for (var i = 0; i < this.props.level; i++) {
  indents.push(<span className='indent' key={i}></span>);
}
return (
   <div>
    {indents}
    "Some text value"
   </div>
);

Ви також можете використовувати .map та фантастичні es6

return (
   <div>
    {this.props.level.map((item, index) => (
       <span className='indent' key={index} />
    ))}
    "Some text value"
   </div>
);

Також вам потрібно загортати повернене значення в контейнер. Я використовував div у наведеному вище прикладі

Як кажуть тут документи

На даний момент у візуалізації компонента ви можете повернути лише один вузол; якщо у вас є, скажімо, список div-файлів для повернення, ви повинні загортати свої компоненти в div, span або будь-який інший компонент.

Ось більш функціональний приклад з деякими особливостями ES6:

'use strict';

const React = require('react');

function renderArticles(articles) {
    if (articles.length > 0) {      
        return articles.map((article, index) => (
            <Article key={index} article={article} />
        ));
    }
    else return [];
}

const Article = ({article}) => {
    return ( 
        <article key={article.id}>
            <a href={article.link}>{article.title}</a>
            <p>{article.description}</p>
        </article>
    );
};

const Articles = React.createClass({
    render() {
        const articles = renderArticles(this.props.articles);

        return (
            <section>
                { articles }
            </section>
        );
    }
});

module.exports = Articles;

Я використовую Object.keys(chars).map(...)цикл у візуалізації

// chars = {a:true, b:false, ..., z:false}

render() {
    return (
       <div>
        {chars && Object.keys(chars).map(function(char, idx) {
            return <span key={idx}>{char}</span>;
        }.bind(this))}
        "Some text value"
       </div>
    );
}

Array.from()приймає ітерабельний об'єкт для перетворення в масив та необов'язкові функції карти. Ви можете створити об'єкт із .lengthвластивістю таким чином:

return Array.from({length: this.props.level}, (item, index) => 
  <span className="indent" key={index}></span>
);

Я думаю, що це найпростіший спосіб зафіксувати реакцію на js

<ul>
    {yourarray.map((item)=><li>{item}</li>)}
</ul>