javascript – 如何使用React.js用类包围每个X元素

我只想做点如下的事情：

<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被包裹在一个.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只是这里的例子,我想知道是否有通用的方法.

解决方法

您不应该像字符串那样连接元素,而是创建和组合反应元素.您可以先使用内容生成元素数组,然后将其缩小为组并使用容器包装：

render() {
    var content = [
        "content 1","content 2","content 3","content 4","content 5","content 6","content 7","content 8","content 9","content 10"
    ];
    var groupSize = 3;
    var rows = content.map(function(content) {
        // map content to html elements
        return <div className="col-md-4">{content}</div>;
    }).reduce(function(r,element,index) {
        // create element groups with size 3,result looks like:
        // [[elem1,elem2,elem3],[elem4,elem5,elem6],...]
        index % groupSize === 0 && r.push([]);
        r[r.length - 1].push(element);
        return r;
    },[]).map(function(rowContent) {
        // surround every group with 'row'
        return <div className="row">{rowContent}</div>;
    });
    return <div className="container">{rows}</div>;
}