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 The update resulted in a warning https://ant.design/components/menu-cn/

stay 4.20.0 After version , We provide

Short for , Better performance and more convenient data organization , Developers no longer need to splice by themselves JSX. At the same time, we abandoned the original writing , You can still be in 4.x Continue to use , But you will see a warning on the console , And will be in 5.0 Remove after .

Project original Writing

const MenuList = [
  {
    
    key: '/Home',
    label: ' home page '
  },
  {
    
    key: '/MobxExplain',
    label: 'mobx Case study '
  },
  {
    
    key: '/HOCExplain',
    label: ' High order component '
  }
]


class MenuView extends react.PureComponent {
    
  //  generate menu 
  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>
    )
  }
}

The updated writing looks like this

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} //  Click submenu to trigger 
    // inlineCollapsed={false}
    >
    </Menu>
  )
}