React.js + Bootstrap渲染行

我正在使用引導，我想渲染行中的4列。不過，我不知道有多少列，所以它應該適用於任何數量的列，並且第一列可以是不同的反應組件，然後是其他列。React.js + Bootstrap渲染行

我想達到的目標：

<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> 
     ); 
    }

來源

2017-01-27 Ľubomír

什麼是你上述 –

我沒有收到來自{} pageBody任何輸出得到的結果。如果我在div中包裝{pageBody}，那麼我只能得到空格div –

您可以嘗試爲同一個創建一個小提琴 –

好像出錯了pageBody

試試這個。

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

而且例如here

來源

2017-01-27 05:22:27

謝謝。它解決了我的問題。 –

React.js + Bootstrap渲染行

回答

相關問題