javascript - React.js を使用してすべての X 要素をクラスで囲む方法

Question

私は単に次のように何かをしたいと思います:

<div class="container">
  <div class="row">
    <div class="col-md-4">content</div>
    <div class="col-md-4">content</div>
    <div class="col-md-4">content</div>
  </div>
  <div class="row">
    <div class="col-md-4">content</div>
    <div class="col-md-4">content</div>
    <div class="col-md-4">content</div>
  </div>

   <!-- etc ... -->

</div>

たとえば、すべての 3.col-md-4'sは.row

私はもう試した：

rows.push(<div className="row">);

   for (var count = 0; count < 9; count++) { 

       rows.push( <!-- content --> );

       // Add closing and reopening divs every 3 elements
       if (count % 3 === 0) {
          rows.push(</div><div className="row">);
       }
   }

   rows.push(</div>);
}

残念ながら、これは機能しません。

さらに、3 と 9 は単なる例であり、一般的なアプローチがあるかどうか疑問に思っていました。

Answer 1

既にlodashを使用している場合は、 chunk関数に興味があるかもしれません。

render: function() {
  var rows = [<div className="col-md-4">content</div>, ...]

  return _.chunk(rows, 3).map(function(group) { 
      return <div className="row">{group}</div>
    });
}

Answer 2

配列内に開始/終了タグだけを配置することはできません。配列内に列を収集し、有効な開始タグと終了タグを使用して、それらをすべて 1 つずつ出力します。

rows.push(<div className="row">{columns}</div>);