Material ui 如何使用ListItemIcon'；s从array.map

下一步我将使用材质ui（材质-ui@1.0.0-beta.38）

我尝试用一个数组来定义我的应用程序菜单，该数组包含一个图标和一个文本（以及我的实际应用程序中的一些更多数据）

如果我直接使用jsx标记，它可以正常工作：

<div>
  <MenuItem button>
    <ListItemIcon>
      <SettingsIcon />
    </ListItemIcon>
    <ListItemText primary="Settings 2" />
  </MenuItem>
</div>

并尝试迭代此过程，但失败：

<div>
  {menuItems.map((mItem, index) => (
  <MenuItem key={mItem.key} to={mItem.path} button>
  <ListItemIcon>
    {mItem.icon}
  </ListItemIcon>
  <ListItemText primary={mItem.text} />
  </MenuItem>
))}
</div>

我如何通过在数组中定义图标和文本并迭代添加组件来实现这一点

完整代码：

import React from 'react';
import {ListItemIcon, ListItemText } from 'material-ui/List';
import { MenuItem} from 'material-ui/Menu';
import HelpIcon from 'material-ui-icons/Help';
import SettingsIcon from 'material-ui-icons/Settings';
import Divider from 'material-ui/Divider';


const menuItems1 = [
  { 
      icon: SettingsIcon,
      text: 'Settings 1'
  },
  { 
      icon: HelpIcon,
      text: 'Help 1'
  }
]
const menuItems2 = [
      { 
          icon: () => <SettingsIcon/>,
          text: 'Settings 1'
      },
      { 
          icon: () => <HelpIcon/>,
          text: 'Help 1'
      }
    ]
const menuItems3 = [
      { 
          icon: {SettingsIcon},
          text: 'Settings 1'
      },
      { 
          icon: {HelpIcon},
          text: 'Help 1'
      }
    ]

//I've tried different versions of the array, I can get any of them to work.
const menuItems=menuItems1;

class MenuTest extends React.Component {
  render() {
    return (
<div>
The {menuItems.length} new menu items wont work with the icons:
{menuItems.map((mItem, index) => (
        <MenuItem key={mItem.key} to={mItem.path} button>
        <ListItemIcon>
        {mItem.icon}
        </ListItemIcon>
          <ListItemText primary={mItem.text} />
        </MenuItem>
      ))}
<Divider/>
The old menu items work, but I want to have these in an Array instead:
<MenuItem button>
      <ListItemIcon>
        <SettingsIcon />
      </ListItemIcon>
      <ListItemText primary="Settings 2" />
    </MenuItem>
<MenuItem button>
      <ListItemIcon>
        <HelpIcon />
      </ListItemIcon>
      <ListItemText primary="Help 2" />
    </MenuItem>
      </div>
    );
  }
}

export default MenuTest;

从“React”导入React；
从“材料界面/列表”导入{ListItemIcon，ListItemText}；
从“物料界面/菜单”导入{MenuItem}；
从“材料ui图标/帮助”导入帮助图标；
从“材料ui图标/设置”导入设置图标；
从“物料界面/分割器”导入分割器；
常量菜单项1=[
{ 
图标：设置图标，
文本：“设置1”
},
{ 
图标：帮助图标，
文本：“帮助1”
}
]
常量menuItems2=[
{ 
图标：（）=>，
文本：“设置1”
},
{ 
图标：（）=>，
文本：“帮助1”
}
]
常量菜单项S3=[
{ 
图标：{SettingsIcon}，
文本：“设置1”
},
{ 
图标：{HelpIcon}，
文本：“帮助1”
}
]
//我尝试过不同版本的阵列，我可以让它们中的任何一个正常工作。
const menuItems=menuItems1；
类MenuTest扩展了React.Component{
render（）{
返回(
{menuItems.length}新菜单项无法与图标一起使用：
{menuItems.map（（mItem，index）=>(
{mItem.icon}
))}
旧的菜单项可以工作，但我希望将它们放在一个数组中：
);
}
}
导出默认菜单测试；

菜单项应将图标存储为组件：

const menuItems1 = [
  { 
      icon: (<SettingsIcon/>),
      text: 'Settings 1'
  },
  { 
      icon: (<HelpIcon/>),
      text: 'Help 1'
  }
]

const menuItems1=[
{ 
图标：（），
文本：“设置1”
},
{ 
图标：（），
文本：“帮助1”
}
]

从何处获取mItem.key和mItem.path？

import React from 'react';
import {ListItemIcon, ListItemText } from 'material-ui/List';
import { MenuItem} from 'material-ui/Menu';
import HelpIcon from 'material-ui-icons/Help';
import SettingsIcon from 'material-ui-icons/Settings';
import Divider from 'material-ui/Divider';


const menuItems1 = [
  { 
      icon: SettingsIcon,
      text: 'Settings 1'
  },
  { 
      icon: HelpIcon,
      text: 'Help 1'
  }
]
const menuItems2 = [
      { 
          icon: () => <SettingsIcon/>,
          text: 'Settings 1'
      },
      { 
          icon: () => <HelpIcon/>,
          text: 'Help 1'
      }
    ]
const menuItems3 = [
      { 
          icon: {SettingsIcon},
          text: 'Settings 1'
      },
      { 
          icon: {HelpIcon},
          text: 'Help 1'
      }
    ]

//I've tried different versions of the array, I can get any of them to work.
const menuItems=menuItems1;

class MenuTest extends React.Component {
  render() {
    return (
<div>
The {menuItems.length} new menu items wont work with the icons:
{menuItems.map((mItem, index) => (
        <MenuItem key={mItem.key} to={mItem.path} button>
        <ListItemIcon>
        {mItem.icon}
        </ListItemIcon>
          <ListItemText primary={mItem.text} />
        </MenuItem>
      ))}
<Divider/>
The old menu items work, but I want to have these in an Array instead:
<MenuItem button>
      <ListItemIcon>
        <SettingsIcon />
      </ListItemIcon>
      <ListItemText primary="Settings 2" />
    </MenuItem>
<MenuItem button>
      <ListItemIcon>
        <HelpIcon />
      </ListItemIcon>
      <ListItemText primary="Help 2" />
    </MenuItem>
      </div>
    );
  }
}

export default MenuTest;

const menuItems1 = [
  { 
      icon: (<SettingsIcon/>),
      text: 'Settings 1'
  },
  { 
      icon: (<HelpIcon/>),
      text: 'Help 1'
  }
]