Javascript React.js+；引导渲染行

我正在使用引导，我想在第行中呈现4列。然而，我不知道我将有多少列，所以它应该适用于任何数量的列，而且第一列可以是不同的反应组件，然后其他列

我想要达到的目标：

<div class="row">
  <div class="col-md-3 component-type-1">...</div>
  <div class="col-md-3 component-type-2">...</div>
  <div class="col-md-3 component-type-2">...</div>
  <div class="col-md-3 component-type-2">...</div>
</div>
<div class="row">
  <div class="col-md-3 component-type-2">...</div>
  <div class="col-md-3 component-type-2">...</div>
  <div class="col-md-3 component-type-2">...</div>
  <div class="col-md-3 component-type-2">...</div>
</div>

...
...
...
...
...
...
...
...

我尝试了一些东西，但没有达到我想要的

    import chunk from 'lodash/chunk.js'

    class Test extends React.Component {

    render() {

           let component1=null;
            if (this.state.shouldBeComponent1) {
                component1=<Component1 key="component1" />;
            }

            let items = [];
            if (component1!=null) items.push(component1);

            this.state.dataForComponents2.forEach((data) => {
                items.push(<Component2 key={data.ID} />)
            });

            const rows = chunk(items, 4);

            let pageBody=null;
            if (items.length>0) {
                pageBody=(
                          rows.map((row) => {
                                <div className="row">
                                    {
                                        row.map((item) => (
                                            {item}
                                        ))
                                    }
                                </div>})

                        );
            }

            return (
                <div>
                    <div className="header">
                         ///Other unreleated code
                    </div>
                        {pageBody}

                </div>
        );
  }

从'lodash/chunk.js'导入区块
类测试扩展了React.Component{
render（）{
设component1=null；
if（this.state.shouldBeComponent1）{
成分1=；
}
设项目=[]；
if（component1！=null）items.push（component1）；
this.state.dataForComponents2.forEach（（数据）=>{
items.push（）
});
常量行=块（项目4）；
让pageBody=null；
如果（项目长度>0）{
页体=(
rows.map（（row）=>{
{
行映射（（项目）=>(
{item}
))
}
})
);
}
返回(
///其他未报告代码
{pageBody}
);
}

您的

页面正文似乎有问题

试试这个

    let pageBody= [];
    if (items.length>0) {
      rows.forEach((row, idx) => {
        pageBody.push 
        (
          <div key={idx} className="row">
          {row}
          </div>
        )}
      );                 
    } 

让pageBody=[]；
如果（项目长度>0）{
rows.forEach（（row，idx）=>{
pageBody.push
(
{row}
)}
);                 
} 

示例
上面的结果是什么我没有从{pageBody}得到任何输出在div中，我得到的是唯一的空div。你能试着为sameI创建一把小提琴吗？我试图让jsbin从lodash中识别块，但我还没有管理它，所以我不能提供runnig snap online谢谢你@fumi_hwh，你救了我的命！我遇到了完全相同的问题，不需要写就不知道如何解决它笨拙的嵌套循环。