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

您可以先使用此处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>
    )
}

使用bootstrap在React中显示行

1 个答案: