Как зациклить и визуализировать элементы в React.js без массива объектов для сопоставления?

Я пытаюсь преобразовать компонент jQuery в React.js, и одна из проблем, с которыми я сталкиваюсь, это рендеринг n элементов на основе цикла for.

Я понимаю, что это невозможно, или рекомендуется, и что, когда в модели существует массив, имеет смысл использовать его полностью map. Это нормально, но что делать, когда у вас нет массива? Вместо этого у вас есть числовое значение, которое соответствует заданному количеству элементов для рендеринга, тогда что вам следует делать?

Вот мой пример, я хочу добавить к элементу произвольное количество тегов span, основываясь на его иерархическом уровне. Итак, на уровне 3, я хочу 3 тега span перед текстовым элементом.

В 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

OLD:

Вы можете использовать один цикл вместо

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 и Fancy 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>