Question

我正在使用material-ui-next（material-ui@1.0.0-beta.38）。

我尝试使用包含图标和文本的数组（以及我实际应用程序中的更多数据）定义我的应用程序菜单。

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

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

但如果我改为定义为数组：

const menuItems1 = [
  { 
      icon: SettingsIcon,
      text: 'Settings 1'
  }]

并尝试迭代它失败：

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

我收到错误消息：

Uncaught TypeError: Cannot read property 'className' of undefined
    at ListItemIcon (ListItemIcon.js:57)
Warning: Failed prop type: Invalid prop `children` of type `function` supplied to `ListItemIcon`, expected a single ReactElement.

如何通过在数组中定义图标和文本并对其进行迭代来添加组件来使其工作？

完整代码：

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;

Answer 1

您的menuItems应将图标存储为组件：

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

如何使用array.map中的ListItemIcon添加MenuItem元素

1 个答案: