[解決済み] React.jsで、マッピングするオブジェクトの配列なしで、要素をループしてレンダリングするにはどうすればよいですか？

質問

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

これは不可能であり、推奨もされないと理解していますし、モデル内に配列が存在する場合は map . それはいいとして、配列がない場合はどうでしょうか。 代わりに、レンダリングする要素の数に相当する数値がある場合は、どうすればよいのでしょうか？

ここでは、ある要素の前に、その階層レベルに応じて任意の数のspanタグをつけたい場合を例に挙げています。 つまり、レベル3では、text要素の前にspanタグを3つ付けたいのです。

javascriptで

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

これと似たようなことをJSXのReact.jsコンポーネントで動作させることはできないようです。 代わりに以下のように、まず正しい長さのtemp配列を構築して、その配列をループさせる必要がありました。

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メソッドは必ずしも1つの要素を返す必要はありません。配列を返すこともできます。

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:

代わりに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>
);

を使用することもできます。 .マップ と派手なes6

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

また、戻り値をコンテナで包む必要があります。上の例ではdivを使いました

ドキュメントにあるように ここで

現在、コンポーネントのレンダーでは、1 つのノードしか返すことができません。たとえば、返すべき div のリストがある場合は、コンポーネントを div、span、またはその他のコンポーネントでラップする必要があります。