React.js+Bootstrap 渲染行

Question

我正在使用引导程序，我想连续渲染 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>
        );
  }

Answer 1

你的pageBody好像有问题

试试这个。

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

例如here