React 中的变量更改时关闭和重新打开标签的清洁方式

Question

我有一个这样的数组：

[
    {
        group: "A",
        id: "1",
        name: "Mike"
    },
    {
        group: "A",
        id: "6",
        name: "Sherley"
    },
    {
        group: "B",
        id: "3",
        name: "Charlie"
    },
    {
        group: "C",
        id: "2",
        name: "Dave"
    }
]

我想根据数组对数组进行分组。该数组已按组和名称排序。所以，我做了这样的事情：

let lastgroup = c[0].group
return <Group title={lastgroup}>
    {c.map(x => {
        if (lastgroup == x.group) {
            return <a href={"#" + x.id}>{x.name}</a>
        } else {
            lastgroup = x.group
            return </Group><Group title={lastgroup}><a href={"#" + x.id}>{x.name}</a> //-> What should I put here for something like this?
        }
    })}
</Group>

现在，上面的解决方案显然不起作用，而且不干净。我应该如何关闭和重新打开 Tag？或者有更简洁的方法吗？

谢谢

Answer 1

为了清理实现，我建议使用一个中间过程，通过 Array#reduce() 对子数组进行分组，然后在缩减结果的 Object#entries() 上映射 [=29] =] 带有 <Group /> 标签的项目。

reduce 步骤通过 group 键将数据分组到一个对象中。每个分组都包含该组的项目数组（这些项目是分组阶段的 JSX 片段 "created"）。

第二步是映射 "reduced object" 的条目。这允许您将 <Group/> 标签包裹在先前减少步骤中为每个组收集的组项目周围，而不需要 lastgroup 想法：

// Component state / data

var data = [
    {
        group: "A",
        id: "1",
        name: "Mike"
    },
    {
        group: "A",
        id: "6",
        name: "Sherley"
    },
    {
        group: "B",
        id: "3",
        name: "Charlie"
    },
    {
        group: "C",
        id: "2",
        name: "Dave"
    }
]

// Component render method

render() {

  return Object.entries(data
  .reduce((grouping, item) => {

    // Insert items for group if not present
    if( !grouping[ item.group ] ) {
        grouping[ item.group ] = [];
    }

    var groupItems = grouping[ item.group ];

    // Create each group item, as we build up the items for this group
    groupItems.push(<a href={"#" + item.id}>{item.name}</a>);

    return grouping;

  }, {}))
  .map((entry) => {

    // entry[0] is the group key, entry[0] is the group value (item array)
    const group = entry[0];
    const items = entry[1];

    // Wrap items of each group with <Group/> tags
    return <Group title={group}>{ items }</Group>
  })

}

Answer 2

第 1 步，按属性 group 对条目进行分组。有关详细信息，请参阅

const groups = data.reduce((reducer, current) => {
    reducer[current.group] = reducer[current.group] || []
    reducer[current.group].push(current)
    return reducer
}, {})
/* 
   console.log(groups)
   should give you
   { A:
       [ { group: 'A', id: '1', name: 'Mike' },
         { group: 'A', id: '6', name: 'Sherley' } 
     ],
     B: 
       [ { group: 'B', id: '3', name: 'Charlie' } ],
     C: 
       [ { group: 'C', id: '2', name: 'Dave' } ] 
    }
*/

第 2 步，渲染组

const keys = Object.keys(groups)
return (<div>
    {keys.map(key => {
        const currentGroup = groups[key]
        // now render entries inside each group
        return (<Group key={key} title={key}>
            {currentGroup.map(entry => {
                return <a key={entry.id} href={`#${entry.id}`}>{entry.name}</a>
            })}
        </Group>)
    })}
</div>)

React 中的变量更改时关闭和重新打开标签的清洁方式

Clean way of close and reopen tag when variable change in React

javascript

arrays

typescript2.0