如何使用 React.js 用 class 围绕每个 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

您不能只将 opening/closing 标签放在数组中，将您的列收集在一个数组中，并通过有效的开始和结束标签将它们全部输出：

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

Answer 2

你不应该像字符串那样连接元素，而是创建和组合反应元素。您可以先生成一个包含内容的元素数组，然后将其缩减为组并用您的容器包装：

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>;
}

Answer 3

如果您已经在使用 lodash, you might be interested in the 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>
    });
}

如何使用 React.js 用 class 围绕每个 X 元素

How to surround every X elements with a class using React.js

javascript

reactjs

react-dom