Warning: [antd: Menu] `children` will be removed in next major version. Please use `items` instead.

Warning: [antd: Menu] children will be removed in next major version. Please use items instead.

andt 更新导致警告 https://ant.design/components/menu-cn/

在 4.20.0 版本后，我们提供了

的简写方式，有更好的性能和更方便的数据组织方式，开发者不再需要自行拼接 JSX。同时我们废弃了原先的写法，你还是可以在 4.x 继续使用，但会在控制台看到警告，并会在 5.0 后移除。

项目原来 的写法

const MenuList = [
  {
    key: '/Home',
    label: '首页'
  },
  {
    key: '/MobxExplain',
    label: 'mobx案例'
  },
  {
    key: '/HOCExplain',
    label: '高阶组件'
  }
]


class MenuView extends react.PureComponent {
  // 生成菜单
  MapMenuList = () => {
    const mapMenuNode = MenuList.map(({ label, key, to }) => {
      return (
        <Menu.Item key={key}>
          <Link to={to}>{label}</Link>
        </Menu.Item>
      )
    })
    return mapMenuNode
  }


  render() {
    return (
      <Menu
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
        mode="inline"
        theme="dark"
      // inlineCollapsed={false}
      >
        {this.MapMenuList()}
      </Menu>
    )
  }
}

更新之后的写法这样子

const MenuView = (props) => {
  const { history } = props

  const onClick = (MenuItem) => {
    history.push(MenuItem.key)
  }

  return (
    <Menu
      defaultSelectedKeys={['1']}
      defaultOpenKeys={['sub1']}
      mode="inline"
      theme="dark"
      items={MenuList}
      onClick={onClick} // 点击子菜单触发
    // inlineCollapsed={false}
    >
    </Menu>
  )
}