Реагировать динамическое контекстное меню / подменю - PullRequest
Новая
       28

Реагировать динамическое контекстное меню / подменю

1 голос
/ 26 марта 2019

С помощью контекстного меню 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>
    );
 }
}

I´получаю сообщение об ошибке: 

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

error: TypeError: item.subname не определено

Есть ли лучший способ сопоставления вложенного объекта?

Цельстроить меню и подменю из объекта динамически.

Ответы [ 2 ]

2 голосов
/ 26 марта 2019

Я думаю, что вы хотите item.subname (не targets.subname), а затем вы хотите добавить проверку существования, потому что не у всех ваших предметов есть поле subname.

Обновление с проверкой существования: 

{item.subname && item.subname.map()}
1 голос
/ 26 марта 2019

Добавлено в ответ Колина (он говорит, что вы действительно ищете item.subname в этом контексте, который выглядит более подходящим, чем ваш target.subname.map, поскольку вы находитесь внутри функции, которая содержит элемент в своей области видимости), убедитесь, чтоваш компонент обрабатывает случаи, когда item.subname не определен;Вы могли бы сделать 

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