将 JSON 与材质 UI 嵌套菜单结合使用

Question

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

我的 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: ''
}
];

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

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

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

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)

107 |       const { colorOption } = this.props;
108 | 
109 |       const languageMenu = {languages.map((item, index) => (
|                                      ^
110 |           <MenuItem
111 |               key={index}
112 |               className={classnames('menu-item', {

@ ./src/components/Header/index.js 23：16-37 @ ./src/routes/app/components/MainApp.js @ ./src/routes/app/index.js @ ./src/client.js @ multi (webpack)-dev-server/client？http：//localhost：8000 webpack/hot/dev-server

webpack-dev-server/client？http：//0.0.0.0：8000/webpack/hot/only-dev-server react-hot-loader/patch ./client.js

我做错了什么？

提前致谢

Answer 1

似乎不是有效的 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}/>
}/>
))}

如果您尝试创建数组数组，则应[]外括号。如果它是一个对象，该对象具有包含 MenuItem 数组

的属性，则

const languageMenu = {languages: 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 设置为一个反应元素，那么

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>