如何为每两个元素映射反应？

Question

假设我有一个看起来像这样的数组：

const array = [0, 1, 2, 3, 4, 5, 6, 7]

我想做的是对.map函数中的每个2个对象进行迭代，但是它需要在渲染器中看起来像这样（请注意，我正在使用React Bootstrap）：

<Row>
<Col>array[0]</Col>
<Col>array[1]</Col>
</Row>


<Row>
<Col>array[2]</Col>
<Col>array[3]</Col>
</Row>

等...

因此，对于每2个对象，它需要拥有自己的行，然后在关闭行并开始包含更多元素的新行之前渲染这2个对象。

实现此目标的最佳方法是什么？

Answer 1

简短答案

转换模型，然后注入View。

详细答案

您需要根据需要将数组转换为矩阵：

const array = [0, 1, 2, 3, 4, 5, 6, 7]

const rows = array.reduce(function (rows, key, index) { 
    return (index % 2 == 0 ? rows.push([key]) 
      : rows[rows.length-1].push(key)) && rows;
  }, []);
  
console.log(rows)

现在，您已将模型转换为这种格式

[ [0, 1] , [2, 3] , [4, 5] , [6, 7] ]

现在，嵌套循环应该优雅地完成工作：

rows.map(row => ( 
  <Row >
  { row.map(col => (<Col>{col}</Col>)) }
  </Row>
))

注意：

这个优雅的解决方案背后的工程是准备模型，然后循环。

不确定，当循环渲染组件时，React是否仍需要ID（例如<Compo id="">）。