React.js + строки рендеринга Bootstrap

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