反应动态上下文菜单/子菜单

Question

使用 React 上下文菜单，在应用时动态创建带有子菜单的菜单，我能够成功渲染菜单，但我无法让子菜单工作。

import React, { Component } from 'react';
import ContextMenuTrigger from 'src/ContextMenuTrigger';
import ContextMenu from 'src/ContextMenu';
import MenuItem from 'src/MenuItem';
import SubMenu from 'src/SubMenu';
const MENU_TYPE = 'SIMPLE';
const targets= [
{
name: 'Banana', 
}, 
{
name: 'Apple', 
subname: [
{
value: 'Red Apple', 
description: 'description for red apple'
},
{
value: 'Green Apple', 
description: 'description for green apple'
}
]
},
{
name: 'Grapes', 
},
{
name: 'Orange', 
subname: [
{
value: 'Orange Juice', 
description: 'description for Orange'
},
{
value: 'Orange Color', 
description: 'description for Orange'
}
]
}
];

export default class SimpleMenu extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<ContextMenuTrigger id={MENU_TYPE}>
<div className='well'>right click menu</div>
</ContextMenuTrigger>
<ContextMenu id={MENU_TYPE}>                    
{targets.map((item) => {
return (
<MenuItem>
{item.name}
<SubMenu>
{item.subname.map(action => {
{action.value}
})}
</SubMenu>
</MenuItem>
)
})}
</ContextMenu>
</div>
);
}
}

我收到错误：

targets.subname.map(action => {{action.value}})}                                                   

错误： 类型错误： 项.子名称未定义

有没有更好的方法来映射抛出嵌套对象？

目标是从对象动态构建菜单和子菜单。

Answer 1

我认为您想要item.subname(而不是targets.subname)，然后您想添加存在检查，因为并非所有项目都有subname字段。

使用状态检查进行更新：

{item.subname && item.subname.map()}

Answer 2

添加到 Colin 的响应中(他说你真的在那个上下文中寻找 item.subname，它看起来比你的 target.subname.map 更合适，因为你在一个函数中，在其范围内包含 item)，确保你的组件处理 item.subname 未定义的情况;你可以做

item.subname != undefined ? 'render submenu items if any' : 'do nothing if undefined';