Question

我正在使用bootstrap，我想在行中渲染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

React.js + Bootstrap渲染行

1 个答案: