javascript - 使用 Bootstrap 在 React 中显示行

Question

我想在 Bootstrap 行中显示项目，每行 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} /> )

和你的 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>
    )
}