使用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}})}
错误:TypeError:item.subname未定义
有没有更好的方法来映射抛出嵌套对象?
目标是动态地从对象构建菜单和子菜单。
添加到Colin的响应中(他说你真的在那个上下文中查找item.subname,它看起来比你的target.subname.map更合适,因为你在一个包含其范围内的项的函数内),确保你的组件处理item.subname未定义的情况;你可以做到
item.subname != undefined ? 'render submenu items if any' : 'do nothing if undefined';
我想你想要item.subname
(不是targets.subname
),然后你想要添加一个存在检查,因为并非你所有的项目都有一个subname
字段。
更新存在检查:
{item.subname && item.subname.map()}