React.js + Bootstrap Rendering Zeilen

Question

Ich benutze Bootstrap und ich möchte 4 Spalten in Zeile zu rendern. Allerdings weiß ich nicht, wie viele Spalten ich haben werde, deshalb sollte es für jede Anzahl von Spalten funktionieren und auch die erste Spalte kann eine andere react-Komponente als andere Spalten sein.

Was ich erreichen möchte:

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

Ich habe versucht, etwas schaffte es aber nicht zu erreichen, was ich will ..

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

scheint etwas falsch mit Ihrem pageBody

Versuchen Sie, diese .

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

Und Beispiel here