Antd：使用 state 属性设置菜单项答案

【问题标题】：Antd: Setting menu items with state propertyAntd：使用 state 属性设置菜单项
【发布时间】：2019-04-14 09:21:42
【问题描述】：

映射方法不适用于渲染子菜单项。

这个类中的状态。

class SideBar extends React.Component {
    constructor(props) {
    super(props);
    this.state = { fruits:["orange","peach","grape"] };

    }

这个类的渲染部分。

<Menu>
<SubMenu 
   key="sub1" 
   title={<span><Icon type="mail" />
   <span>User-list</span></span>}>

   {this.state.fruits.map(function(item, i){
     <Menu.Item key={i}>{item}</Menu.Item>
   })}

</SubMenu>
</Menu>

【问题讨论】：

欢迎来到 SO！我不清楚你到底在期待什么 - 你能详细说明一下吗？

标签： reactjs antd

【解决方案1】：

您不会从地图中的函数返回任何内容。看这个例子：https://codesandbox.io/s/73w271now6?fontsize=14

{this.state.fruits.map(function(item, i) {
  return <Menu.Item key={i}>{item}</Menu.Item>;
})}

你也可以在那里创建一个箭头函数并省略return关键字，因为你只有一行代码（如果你想了解更多关于箭头函数的信息，你可以阅读this），像这样：

{
  this.state.fruits.map((item, i) => <Menu.Item key={i}>{item}</Menu.Item>)
}

【讨论】：