antdesign的導(dǎo)航菜單組件Menu組件怎么動態(tài)添加新的子元素

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,
    }
  }
  //導(dǎo)航點擊事件
  handleClick = (e) => {
    console.log(e);
  }
  //按鈕點擊事件
  btn1 = () => {
    this.setState({
      modalVisible: true
    })
  }
  //對話框內(nèi)取消事件
  modalCancel = () => {
    this.setState({
      modalVisible: false,
    })
  }
  //對話框內(nèi)確認(rèn)事件
  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

這個是我寫的代碼我想在點擊+號之后在他的下一級再創(chuàng)建一個二級的導(dǎo)航我應(yīng)該怎么做求各位大佬幫我看看和下邊的這個意思一樣

回答

編輯回答

葬愛

react的一個思想就是數(shù)據(jù)驅(qū)動，你可以用一個變量來標(biāo)識menu item的長度，然后用for循環(huán)來生成menu item，點擊添加的時候讓長度加1，react會自動更新頁面

2017年4月16日 23:53

編輯回答

空白格

維護(hù)一個樹形的數(shù)據(jù)，點+號就往數(shù)據(jù)里加子節(jié)點，然后渲染，每個節(jié)點判斷有沒有子節(jié)點，有就渲染成SubMenu，沒有就渲染成Menu.Item

2017年2月24日 01:05

編輯回答

吢涼

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>
        大概類似這種，動態(tài)操作你的menus的數(shù)組，然后根據(jù)是否有child顯示不同的菜單。

2018年3月4日 01:03