使用引導在React中顯示行

Question

我想在每行中顯示3列的引導行中的項目。但是使用此代碼，所有項目都將排成一行。我想顯示 <div className="row"> 當我有3個項目。

renderItems:function(){ 
     var items = this.props.items; 
     return items.map(function(item){ 
      return (
       <ItemPreview key={item.id} item={item}/> 
      ) 
     }); 
    }, 

Answer 1

您可以this.props.items使用該解決方案在這裏Partitioning in JavaScript

之後的第一個分區，在返回的數組將被劃分

var partitionedItems = [[1,2,3],[4,5,6]...] 
return paritionedItems.map((items) => <Row items={items} />) 

和你行組件

// RowComponent.js 

renderItems: function(items) { 
    return items.map(function(item){ 
     return (
      <ItemPreview key={item.id} item={item}/> 
     ) 
    }); 
}, 

render: function() { 
    return (
     <div className="row"> 
      { this.renderItems(this.props.items) } 
     </div> 
    ) 
}