マップするオブジェクトの配列なしでReact.jsの要素をループしてレンダリングする方法は？

jQueryコンポーネントをReact.jsに変換しようとしていますが、問題の1つはforループに基づいてn個の要素をレンダリングすることです。

これは不可能であるか、または推奨されておらず、モデルに配列が存在する場合、それを使用することは完全に理にかなっていることを理解しています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"
    ...
  );
}

確かに、これは最善の方法ではありませんか、またはこれを達成する唯一の方法ですか？何が欠けていますか？

更新：React> 0.16現在

Renderメソッドは必ずしも単一の要素を返す必要はありません。配列を返すこともできます。

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の子供について説明しているドキュメント

古い：

代わりに1つのループを使用できます

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を使用しました

ドキュメントがここで言うように

現在、コンポーネントのレンダーでは、1つのノードのみを返すことができます。たとえば、返す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>