首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >React动态上下文菜单/子菜单

React动态上下文菜单/子菜单
EN

Stack Overflow用户
提问于 2019-03-26 06:25:28
回答 2查看 1.8K关注 0票数 1

使用React context- menu,在应用时动态创建带有子菜单的菜单,我可以成功地渲染菜单,但是我不能使子菜单工作。

代码语言:javascript
复制
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>
    );
 }
}

我在以下位置收到错误:

代码语言:javascript
复制
 targets.subname.map(action => {{action.value}})}                                                   

错误: TypeError:未定义item.subname

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

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

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-03-26 07:02:25

添加到科林的响应中(他说您实际上是在那个上下文中寻找item.subname,这看起来比您的target.subname.map更合适,因为您在一个包含其作用域中的项的函数中),确保您的组件处理item.subname未定义的情况;您可以这样做

代码语言:javascript
复制
item.subname != undefined ? 'render submenu items if any' : 'do nothing if undefined';
票数 1
EN

Stack Overflow用户

发布于 2019-03-26 06:35:20

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

使用存在检查进行更新:

代码语言:javascript
复制
{item.subname && item.subname.map()}
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55347282

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档