使用引导程序在 React 中显示行

【问题标题】：Display row in React using bootstrap使用引导程序在 React 中显示行
【发布时间】：2016-03-05 15:15:03
【问题描述】：

我想在每行 3 列的引导行中显示项目。但是使用此代码，所有项目都在一行中。我想显示 <div className="row"> 当我有 3 件物品时。

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

【问题讨论】：

标签： javascript arrays twitter-bootstrap-3 reactjs

【解决方案1】：

您可以先使用Partitioning in JavaScript 此处的解决方案对您的this.props.items 进行分区

之后，返回的数组会被分区

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

和你的 Row 组件

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

【讨论】：

_.chunk(['a', 'b', 'c', 'd'], 2);使用 lodash