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

像这样写：

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

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换行。

您想为每 4 列换行新行，对吗？

试试这个

render() {
		const products = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
		let rowContents = [];
		const contents = products.reduce((acc, p, i) => {
			rowContents.push(<div key={i} className="col col-md-3">Col {p}</div>);
			if (i % 4 === 3) {
				acc.push(<div className="row">{rowContents}</div>);
				rowContents = [];
			}
			return acc;
		},[])
       contents.push(<div className="row">{rowContents}</div>);

		return (
			<div>
			{contents}
			</div>
		)
	}

你可以这样做：

render() {

    function toChunkArray(myArray: any, chunkSize: any): any {
        var results = [];

        while (myArray.length) {
            results.push(myArray.splice(0, chunkSize));
        }

        return results;
    }

    let chunkedArraysOfColSize = toChunkArray(myList, 3);

    return (
        <div className="row">
            {
                chunkedArraysOfColSize.map( (colSizeArray, index) =>
                    <div className="col-sm-4" key={index.toString()}>
                        {colSizeArray.map((o, i) =>
                            <NameOfComponent key={o.Id} obj={o} />
                        )}
                    </div>
                )
            }
        </div>
    );
}