antdesign的导航菜单组件Menu组件怎么动态添加新的子元素

Question

import React, {Component} from 'react'
import {Menu, Icon, Button, Modal} from 'antd';
import './LeisurePriceStock.less'

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

class LeisurePriceStock extends Component {
  constructor(props) {
    super(props)
    this.state = {
      modalVisible: false,
    }
  }
  //导航点击事件
  handleClick = (e) => {
    console.log(e);
  }
  //按钮点击事件
  btn1 = () => {
    this.setState({
      modalVisible: true
    })
  }
  //对话框内取消事件
  modalCancel = () => {
    this.setState({
      modalVisible: false,
    })
  }
  //对话框内确认事件
  handleOk = () => {
    this.setState({
      modalVisible: false,
    })
  }

  render() {
    return (
      <Menu
        onClick={this.handleClick}
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
        mode="inline"
        className={'oneLevelCatalog'}
      >
        <SubMenu key="sub1" className={'twoLevelCatalog'}
                 title={<span>所有套餐{<Button onClick={this.btn1}>+</Button>}</span>}>
          <Menu.Item key="1" className={'threeLevelCatalog'}>Option 1</Menu.Item>
          <Menu.Item key="2" className={'threeLevelCatalog'}>Option 2</Menu.Item>
          <SubMenu key="sub2" title="Submenu">
            <Menu.Item key="3" className={'threeLevelCatalog'}>Option 3</Menu.Item>
            <Menu.Item key="4" className={'threeLevelCatalog'}>Option 4</Menu.Item>
          </SubMenu>
        </SubMenu>
        <Modal
          visible={this.state.modalVisible}
          title={"123"}
          onCancel={this.modalCancel}
          onOk={this.handleOk}
        >
          <p>对话框</p>
        </Modal>
      </Menu>
    )
  }
}
export default LeisurePriceStock

这个是我写的代码 我想在点击+号之后在他的下一级再创建一个二级的导航 我应该怎么做 求各位大佬帮我看看 和下边的这个意思一样

Answer 1

const menus=[xx,xx]
<Menu theme="dark">
                {menus.map(v => {
                    return v.child
                        ? <SubMenu key={v.id}
                                   title={<span className="nav-text">{v.txt}</span>}>
                            {
                                v.child.map(v2 => {
                                    return <Menu.Item key={v2.sref}>
                                        <Link to={v2.sref}>                 
                                            <span className="nav-text">{v2.txt}</span>
                                        </Link>
                                    </Menu.Item>
                                })
                            }
                        </SubMenu>
                        : <Menu.Item key={v.sref}>
                            <Link to={v.sref}>
                                 <span className="nav-text">{v.txt}</span>
                            </Link>
                        </Menu.Item>
                })}
            </Menu>
        大概类似这种，动态操作你的menus的数组，然后根据是否有child显示不同的菜单。

Answer 2

react的一个思想就是数据驱动，你可以用一个变量来标识menu item的长度，然后用for循环来生成menu item，点击添加的时候让长度加1，react会自动更新页面

Answer 3

维护一个树形的数据，点+号就往数据里加子节点，然后渲染，每个节点判断有没有子节点，有就渲染成SubMenu，没有就渲染成Menu.Item