React使用Object.map传递props时保留对象键名的实现方案

不需要用JSON.stringify拼接字符串再转对象这种低效方案，直接用ES6的计算属性名语法，遍历的时候动态构造目标结构即可，没有任何额外转换开销。

修改后的渲染代码：

return (
    <div className='menud'>
        {obj["root"] !== undefined ?
            Object.entries(obj).map(([key, menuItems]) => 
            <MenuList 
                // 动态构造 { [当前键名]: 对应菜单数组 } 的结构
                menuArray={{ [key]: menuItems }}
                key={key} 
                menuKey={key} 
                pcbClick={handleItemClick} 
            />)
            : null
        }
    </div>
);

原理说明 #

{ [key]: menuItems }是ES6标准的对象计算属性写法：

• 方括号包裹的变量key会被自动求值，作为生成对象的键名
• 键对应的值就是当前遍历拿到的菜单数组menuItems
• 整个过程是原生JS对象操作，没有序列化/反序列化的性能损耗，代码也更简洁易维护。

可选优化 #

你当前写的obj["root"] !== undefined判断是非必要的：如果obj.root不存在，Object.entries(obj)遍历本身就不会返回root对应的条目，不会触发渲染报错，代码可以进一步简化：

return (
    <div className='menud'>
        {Object.entries(obj).map(([key, menuItems]) => 
            <MenuList 
                menuArray={{ [key]: menuItems }}
                key={key} 
                menuKey={key} 
                pcbClick={handleItemClick} 
            />
        )}
    </div>
);

如果你的业务逻辑要求必须存在root字段才渲染整个菜单区块，保留原有判断即可。

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