javascript - React 循环并创建元素

Question

我有以下结构中的项目数组。

[{column: 1, name: 'one'}, {column: 2, name: 'Two'},{column: 2, name: 'Three'},{column: 3, name: 'Four'}]

需要循环遍历数组，并且具有相同列值的项目应包装在单父项中。 就像，

<div class="parent">
    One
</div>
<div class="parent">
    <div>Two</div>
    <div>Three</div>
</div>
<div class="parent">
    Four
</div>

正如您所看到的，第二个父元素有两个子元素，因为它们具有相同的列值“2”。

Answer 1

根据列聚合数组，然后根据聚合值生成数据。

const array = [{column: 1, name: 'one'}, {column: 2, name: 'Two'},{column: 2, name: 'Three'},{column: 3, name: 'Four'}]

const aggregatedArray = array.reduce((agg, {column, name})=>{
  if(!Array.isArray(agg[column)){
    agg[volumn] = []
  }
  agg[column].push(name)
  return agg
}, {})

Object.entries().map([key, value]=><div className="parent">
  {value.map(v=><div>{v}</div>)}
</div>)