使用React context- menu,在应用时动态创建带有子菜单的菜单,我可以成功地渲染菜单,但是我不能使子菜单工作。
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
有没有更好的方法来映射抛出嵌套对象?
目标是从对象动态构建菜单和子菜单。
发布于 2019-03-26 07:02:25
添加到科林的响应中(他说您实际上是在那个上下文中寻找item.subname,这看起来比您的target.subname.map更合适,因为您在一个包含其作用域中的项的函数中),确保您的组件处理item.subname未定义的情况;您可以这样做
item.subname != undefined ? 'render submenu items if any' : 'do nothing if undefined';
发布于 2019-03-26 06:35:20
我认为您想要item.subname
(而不是targets.subname
),然后想要添加一个存在检查,因为并不是所有的条目都有subname
字段。
使用存在检查进行更新:
{item.subname && item.subname.map()}
https://stackoverflow.com/questions/55347282
复制相似问题