Antd：设置具有state属性的菜单项

Posted 2021-03-27

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

这个班的州。

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>

答案

您没有从地图中的函数返回任何内容。看到这个例子：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>)
}