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}})}

错误：TypeError：item.subname未定义

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

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

Answer 1

我认为您想要use strict; use warnings; use diagnostics; use v5.16; my $command = system("ps -A | less"); my $filename = 'test.txt'; open(my $filehandle, '>', $filename) or die "Could not open file $filename' $!"; #my @list_of_processes = 'system("ps -A | less")'; #print $filehandle @list_of_processes; print $filehandle $command; close $filehandle; print"done\n";（而不是item.subname），然后又想添加一个存在检查，因为并非您所有的物品都有一个targets.subname字段。

使用存在性检查进行更新：

subname

Answer 2

添加到Colin的响应中（他是说您正在该上下文中真正查找item.subname，这比您的target.subname.map看起来更合适，因为您位于包含其范围内item的函数中），请确保您的组件处理未定义item.subname的情况；您可以

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

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

2 个答案: