React:每隔4列渲染一个新行

Question

我正在使用react,我希望render每隔四列新增一行.

我的代码:

function Product(props) {
  const content = props.products.map((product) => (
        <div className="row" key={product.id}>       
          <article key={product.id} className="col-md-3"></article>
        </div> )
  );
  return (
    <div>
        {content}
    </div>
  );
}

我通过传递一个看起来像这样的条件尝试了这种方法:

if (product.id % 4 == 1),在列周围,但它不起作用......

这就是我想要发生的事情:

<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>

Answer 1

1. 将您的产品分组为(最多)4个元素的行,即

   [1,2,3,4,5,6,7,8] => [ [1, 2, 3, 4], [5, 6, 7, 8 ] ]

2. 迭代组以生成行,并在内部循环中迭代项以显示列

要计算行数,每行给定4个项目,请使用Math.ceil(props.products.length / 4).然后创建一个行数组.鉴于2行(8个项目)Array(2).由于您不能map使用未初始化元素的数组,因此可以使用扩展语法:[...Array(2)]返回[ undefined, undefined ].

现在,你可以将这些映射undefined条目到行:每一行需要4种元素,从产品:[ undefined, undefined ].map( (row, idx) => props.products.slice(idx * 4, idx * 4 + 4) ) )(编辑注改变slice,因为splice变异的原始数组).结果是一个数组数组(项目行).

您可以迭代行,并在每次迭代内迭代给定行中的项目.

https://jsfiddle.net/dya52m8y/2/

const Products = (props) => {
    // array of N elements, where N is the number of rows needed
    const rows = [...Array( Math.ceil(props.products.length / 4) )];
    // chunk the products into the array of rows
    const productRows = rows.map( (row, idx) => props.products.slice(idx * 4, idx * 4 + 4) ); );
    // map the rows as div.row
    const content = productRows.map((row, idx) => (
        <div className="row" key={idx}>    
          // map products in the row as article.col-md-3
          { row.map( product => <article key={product} className="col-md-3">{ product }</article> )}
        </div> )
    );
    return (
        <div>
          {content}
        </div>
    );
}

Answer 2

像这样写:

function Product(props) {
  let content = [];
  props.products.forEach((product, i) =>{
      if((i+1) % 4 == 0){
        content.push(
          <div className="row" key={product.id}>       
            <article key={product.id} className="col-md-3"></article>
          </div>
        )
      }else{
          content.push(<article key={product.id} className="col-md-3"></article>);
      }
  });
  return (
    <div>
        {content}
    </div>
  );
}

Answer 3

Bootstrap 的好处是你可以将所有的都保存col*在一个单独的 中 row，然后div每 4 列插入一个全角来强制换行。这些使它更简单，您不必对数据进行分块。

这是 React 渲染的样子：

render() {
    let columns=[];
    this.props.items.forEach((item,idx) => {

        // push column
        columns.push(
            <div className="col-sm py-3" key={idx}>
                Content
            </div>
        )

        // force wrap to next row every 4 columns
        if ((idx+1)%4===0) {columns.push(<div className="w-100"></div>)}
    })


    return (
        <div className="row">
        {columns}
        </div>
    )            
}

演示： https : //www.codeply.com/go/VMV26jhHFz

注意：在Bootstrap 4 中，使用<div className="w-100"></div>如上所示。在Bootstrap 3 中，用于<div className="clearfix"></div>强制列每n换行。