React中如何依据Key拆分输入JSON生成Accordion分组结构？

我们需要把给定的表单元素数组，按照每个元素的key字段值进行分组，转换成Accordion组件需要的数据结构——每个分组对应一个Accordion面板，包含key、title（与key值一致）以及该组下的所有表单元素列表content。

输入示例 #

const input = [
    {
        key: "accordionGroupOne",
        type: "input",
        props: {
            label: "Input",
        }
    }, 
    {
        key: "accordionGroupOne",
        type: "dropDown",
        props: {
            label: "DropDown",
        }
    }, 
    {
        key: "accordionGroupTwo",
        type: "Input",
        props: {
            label: "Input",
        }
    }
];  

期望输出 #

const output = [
    {
        key: "accordionGroupOne",
        title: "accordionGroupOne",
        content: [
            {
                type: "input",
                props: {
                    label: "Input",
                }
            },
            {
                type: "dropDown",
                props: {
                    label: "DropDown",
                }
            }

        ]
    }, 
    {
        key: "accordionGroupTwo",
        title: "accordionGroupTwo",
        content: [
            {
                type: "input",
                props: {
                    label: "Input",
                }
            }
        ]
    }
];   

实现代码 #

可以用JavaScript的reduce方法先完成分组，再把分组结果转换成目标数组：

const groupInput = (inputArr) => {
    // 按key分组
    const grouped = inputArr.reduce((acc, item) => {
        const groupKey = item.key;
        if (!acc[groupKey]) {
            acc[groupKey] = [];
        }
        // 移除key字段，统一type为小写后存入分组
        acc[groupKey].push({
            type: item.type.toLowerCase(),
            props: item.props
        });
        return acc;
    }, {});

    // 转换为Accordion所需的数组结构
    return Object.entries(grouped).map(([key, content]) => ({
        key,
        title: key,
        content
    }));
};

// 使用示例
const output = groupInput(input);
console.log(output);

代码说明 #

1. 分组阶段：通过reduce遍历输入数组，以元素的key为分组键，将处理后的表单元素（移除key字段、统一type大小写）存入对应分组的数组。
2. 结构转换：用Object.entries将分组对象转为键值对数组，再映射成Accordion面板的结构，每个面板包含key、title和content三个字段。

内容的提问来源于stack exchange，提问作者Ramkumar Ramaraj