Reactjs 将JSON与材质UI嵌套菜单一起使用

我试图在嵌套菜单级别将数据绑定到菜单项。我可以成功地映射数据以填充主标高，但子菜单给了我一个错误

我的JSON如下所示：

const languages = [
    {
        name: 'English',
        icon: './assets/images/flags/uk.png',
        link: ''
    },
    {
        name: 'Español',
        icon: './assets/images/flags/Spain.png',
        link: ''
    },
    {
        name: 'Français',
        icon: './assets/images/flags/France.png',
        link: ''
    }
];

import React from 'react';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton';
import Divider from 'material-ui/Divider';
import Download from 'material-ui/svg-icons/file/file-download';
import ArrowDropRight from 'material-ui/svg-icons/navigation-arrow-drop-right';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';

/**
 * Example of nested menus within an IconMenu.
 */
const IconMenuExampleNested = () => (
  <IconMenu
    iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
    anchorOrigin={{horizontal: 'left', vertical: 'top'}}
    targetOrigin={{horizontal: 'left', vertical: 'top'}}
  >
    <MenuItem
      primaryText="Copy & Paste"
      rightIcon={<ArrowDropRight />}
      menuItems={[
        <MenuItem primaryText="Cut" />,
        <MenuItem primaryText="Copy" />,
        <Divider />,
        <MenuItem primaryText="Paste" />,
      ]}
    />

    <MenuItem
      primaryText="Case Tools"
      rightIcon={<ArrowDropRight />}
      menuItems={[
        <MenuItem primaryText="UPPERCASE" />,
        <MenuItem primaryText="lowercase" />,
        <MenuItem primaryText="CamelCase" />,
        <MenuItem primaryText="Propercase" />,
      ]}
    />

  </IconMenu>
);

export default IconMenuExampleNested;

我正在以常量保存子菜单，以便在渲染中使用它。我相信这是我的问题领域，但不确定我需要做什么

class Menu extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false,
            open: false
        }
    }
    render() {
        const { colorOption } = this.props;

        //the code inside this const will work if I insert it inside my IconMenu. But it doesn't work inside the menuItems property which should be able to hold MenuItem objects    
        const languageMenu = {languages.map((item, index) => (
            <MenuItem
                key={index}
                className={classnames('menu-item', {
                    'bg-color-medlight': ['11', '12', '13', '14', '15', '16'].indexOf(colorOption) >= 0,
                    'bg-color-meddark': ['21', '22', '23', '24', '25', '26'].indexOf(colorOption) >= 0
                })}
                primaryText={languages[index].name}
                style={{userMenuItem}}
                leftIcon={
                    <img className="flag" src={languages[index].icon}/>
                }/>
        ))}

        return(
        <div style={{zIndex:2}}>
            <ul className="list-unstyled">
                    <li>
                        <IconMenu
                            className="user"
                            iconButtonElement={
                                <RaisedButton style={ImgIconButtonStyle}><PersonalMenuIcon/></RaisedButton>
                            }
                            onChange={this.handleChange}
                            anchorOrigin={{horizontal: 'right', vertical: 'bottom'}}
                            targetOrigin={{horizontal: 'right', vertical: 'top'}}>

                            <MenuItem
                                className={classnames('menu-item', {
                                    'bg-color-medlight': ['11', '12', '13', '14', '15', '16'].indexOf(colorOption) >= 0,
                                    'bg-color-meddark': ['21', '22', '23', '24', '25', '26'].indexOf(colorOption) >= 0
                                })}
                                primaryText="English"
                                rightIcon={<ArrowDropRight />}
                                style={{userMenuItem}}
                                leftIcon={
                                    <img className="flag" src="./assets/images/flags/uk.png"/>
                                }
                                menuItems={{languageMenu}}
                                />
                        </IconMenu>
                    </li>
                </ul>
            </div>
        );
    } 

}

在理想情况下，常规嵌套菜单如下所示：

const languages = [
    {
        name: 'English',
        icon: './assets/images/flags/uk.png',
        link: ''
    },
    {
        name: 'Español',
        icon: './assets/images/flags/Spain.png',
        link: ''
    },
    {
        name: 'Français',
        icon: './assets/images/flags/France.png',
        link: ''
    }
];

import React from 'react';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton';
import Divider from 'material-ui/Divider';
import Download from 'material-ui/svg-icons/file/file-download';
import ArrowDropRight from 'material-ui/svg-icons/navigation-arrow-drop-right';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';

/**
 * Example of nested menus within an IconMenu.
 */
const IconMenuExampleNested = () => (
  <IconMenu
    iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
    anchorOrigin={{horizontal: 'left', vertical: 'top'}}
    targetOrigin={{horizontal: 'left', vertical: 'top'}}
  >
    <MenuItem
      primaryText="Copy & Paste"
      rightIcon={<ArrowDropRight />}
      menuItems={[
        <MenuItem primaryText="Cut" />,
        <MenuItem primaryText="Copy" />,
        <Divider />,
        <MenuItem primaryText="Paste" />,
      ]}
    />

    <MenuItem
      primaryText="Case Tools"
      rightIcon={<ArrowDropRight />}
      menuItems={[
        <MenuItem primaryText="UPPERCASE" />,
        <MenuItem primaryText="lowercase" />,
        <MenuItem primaryText="CamelCase" />,
        <MenuItem primaryText="Propercase" />,
      ]}
    />

  </IconMenu>
);

export default IconMenuExampleNested;

我得到的错误是

模块生成失败：语法错误： C:/xampp/htdocs/ScalaCMReact/src/components/Header/UserMenu.js：意外标记，预期，109:33

@./src/components/Header/index.js 23:16-37 @/src/routes/app/components/MainApp.js @./src/routes/app/index.js @./src/client.js @多网页包开发服务器/客户端？webpack/hot/dev server webpack dev server/client？webpack/hot/only dev server react hot loader/patch./client.js

我做错了什么

---

提前感谢

似乎不是有效的javascript

const languageMenu = {languages.map((item, index) => (
            <MenuItem
                key={index}
                className={classnames('menu-item', {
                    'bg-color-medlight': ['11', '12', '13', '14', '15', '16'].indexOf(colorOption) >= 0,
                    'bg-color-meddark': ['21', '22', '23', '24', '25', '26'].indexOf(colorOption) >= 0
                })}
                primaryText={languages[index].name}
                style={{userMenuItem}}
                leftIcon={
                    <img className="flag" src={languages[index].icon}/>
                }/>
        ))}

如果要将languageMenu设置为react元素，则

const languageMenu = <div>
{languages.map((item, index) => (
            <MenuItem
                key={index}
                className={classnames('menu-item', {
                    'bg-color-medlight': ['11', '12', '13', '14', '15', '16'].indexOf(colorOption) >= 0,
                    'bg-color-meddark': ['21', '22', '23', '24', '25', '26'].indexOf(colorOption) >= 0
                })}
                primaryText={languages[index].name}
                style={{userMenuItem}}
                leftIcon={
                    <img className="flag" src={languages[index].icon}/>
                }/>
        ))}
</div>

---

感谢Mukesh，修复了初始错误，但我现在得到的错误是失败的prop type：提供给MenuItem的prop menuItems无效，应为ReactNode。当我点击菜单时，我又看到一个错误，上面写着uncaughterror:Objects作为React-child-found无效：objectwithkeys{languageMenu}。如果要渲染子对象集合，请改用数组，或使用React附加组件中的createFragmentobject包装对象。检查MenuItem的渲染方法。这与您刚才所说的非常相关，但我尝试在[]内注入并不断收到错误，这是因为MenuItem props需要一个react节点，而您正在向它发送一个它尝试渲染的对象。我不知道材料UI库是否有效。但是您可能希望将子菜单数组包装在一个divI中，我为languageMenu添加了另一个选项，它应该会处理错误。但我不知道它是否能提供你想要的输出。在他们周围绕一圈也没什么用。我无法手动输入这些。我可以，但是我需要把它们放在json中，这样我才能更好地操纵它们。选择的语言将显示在其他元素上，并最终翻译应用程序。