使用vue-ant写jsx无限嵌套菜单

使用vue-ant写jsx无限嵌套菜单

首先写无限菜单的时候就想到写一个递归组件、
以下是一开始写的递归子组件

import { mapGetters } from 'vuex'

export default {
  name: 'menuItem',
  props: {
    menuData: {
      type: Array,
      required: true
    }
  },
  methods: {
  },
  // functional: true,
  render() {
    const { menuData } = this
    // function components(menuData) {
    return (<div >
      {(menuData || []).map(item => {
        if (item.children) {
          return (
            <a-sub-menu key={item.key}>
              <span slot="title"><a-icon type="mail" /><span>{item.name}</span></span>
              <menuItem menuData={item.children}></menuItem>
            </a-sub-menu>)
        } else {
          return (<a-menu-item key={item.key} to={item.path}>
            <a-icon type="pie-chart" />
            <span>{item.name}</span>
          </a-menu-item>)
        }
      })
      }
    </div>)
  }
}

父组件是：

import { mapGetters } from 'vuex'
import store from '@/store'
import logo from '@/assets/image/gaun.gif'
import MenuItem from './menuItem'



const styles = {
  width: '40px',
  height: '61px'
}

// const MenuItem = ({
//   props: {
//     menuInfo
//   }
// }) => (menuInfo || []).map(item => {
//   if (item.children) {
//     return (
//       <a-sub-menu key={item.key}>
//         <span slot="title"><a-icon type="mail" /><span>{item.name}</span></span>
//         <MenuItem menuInfo={item.children} ></MenuItem>
//       </a-sub-menu>)
//   } else {
//     return (<a-menu-item key={item.key} to={item.path}>
//       <a-icon type="pie-chart" />
//       <span>{item.name}</span>
//     </a-menu-item>)
//   }
// })

export default {
  name: 'menuLeft',
  computed: {
    ...mapGetters(['collapsed'])
  },
  data() {
    return {
      menuList: [
        {
          key: '1121',
          name: '关心',
          children: [
            {
              key: 'guan1',
              name: 'gaun1',
              children: [
                {
                  key: '/index/guan1', name: 'gaun11', path: '/index/guan1',
                  children: [
                    {
                      key: '/index/guan1122',
                      name: 'gaun11q',
                      path: '/index/guan1',
                      children: [{
                        key: '/index/guan112',
                        name: 'gaun1d1',
                        path: '/index/guan1s'
                      }]
                    }]
                },
                { key: '/index/guan', name: 'gaun12', path: '/index/guan' },
                { key: 'guan13', name: 'gaun13', path: '/index/demo' }
              ]
            },
            { key: 'guan2', name: 'gaun2' },
            { key: 'guan3', name: 'gaun3' }
          ]
        },
        {
          key: '1111',
          name: 'qwqwqw',
        },
      ]
    }
  },
  components: {
    MenuItem
  },
  methods: {
    toPath(path) {
      this.$router.push({ path: path })
    }
  },
  render() {
    const { collapsed, disCollapsed, menuList, toPath } = this
    return (
      <div>
        <div style="height:58px;background: #001529;">
          <img height="55px; postation:absolute; top: 0" src={logo} alt="" />
        </div>
        <div style={collapsed ? "width: 80px;" : "width: 256px;"}>
          <a-menu
            // default-selected-keys={['1']}
            // default-open-keys={['sub1']}
            selectedKeys={[this.$route.path]}
            mode="inline"
            theme="dark"
            style="width:100%; height: 100vh;text-align: start;"
            inlineCollapsed={collapsed}
          >
            {(menuList || []).map(item => {
              if (item.children) {
                return (
                  <a-sub-menu key={item.key}>
                    <span slot="title"><a-icon type="mail" /><span>{item.name}</span></span>
                    <MenuItem menuInfo={item.children} ></MenuItem>
                  </a-sub-menu>)
              } else {
                return (<a-menu-item key={item.key} to={item.path}>
                  <a-icon type="pie-chart" />
                  <span>{item.name}</span>
                </a-menu-item>)
              }
            })
            }
          </a-menu>
        </div >
      </div>

    )
  }
}

运行起来就会出现

关于Antd Menu组件遍历Submenu isRootMenu undefined 的问题
网上到解决方法‘多’的吓人，查来查去就只有复制粘贴，就成自己的，也不知道怎么想的，而且大部分还是react的结局方法，也有vue的解决方法就是，最常见的就是使用函数式组件，不过jsx就是函数式的写法，也不知道对不对，反正大体上就是找不到isRootMenu，不知道是不是子组件的render函数的问题让他找不到头部，于是直接在父组件定义一个函数式组件。具体代码如下：

import { mapGetters } from 'vuex'
import store from '@/store'
import logo from '@/assets/image/gaun.gif'
// import MenuItem from './menuItem'



const styles = {
  width: '40px',
  height: '61px'
}

const MenuItem = ({
  props: {
    menuInfo
  }
}) => (menuInfo || []).map(item => {
  if (item.children) {
    return (
      <a-sub-menu key={item.key}>
        <span slot="title"><a-icon type="mail" /><span>{item.name}</span></span>
        <MenuItem menuInfo={item.children} ></MenuItem>
      </a-sub-menu>)
  } else {
    return (<a-menu-item key={item.key} to={item.path}>
      <a-icon type="pie-chart" />
      <span>{item.name}</span>
    </a-menu-item>)
  }
})

export default {
  name: 'menuLeft',
  computed: {
    ...mapGetters(['collapsed'])
  },
  data() {
    return {
      menuList: [
        {
          key: '1121',
          name: '关心',
          children: [
            {
              key: 'guan1',
              name: 'gaun1',
              children: [
                {
                  key: '/index/guan1', name: 'gaun11', path: '/index/guan1',
                  children: [
                    {
                      key: '/index/guan1122',
                      name: 'gaun11q',
                      path: '/index/guan1',
                      children: [{
                        key: '/index/guan112',
                        name: 'gaun1d1',
                        path: '/index/guan1s'
                      }]
                    }]
                },
                { key: '/index/guan', name: 'gaun12', path: '/index/guan' },
                { key: 'guan13', name: 'gaun13', path: '/index/demo' }
              ]
            },
            { key: 'guan2', name: 'gaun2' },
            { key: 'guan3', name: 'gaun3' }
          ]
        },
        {
          key: '1111',
          name: 'qwqwqw',
        },
      ]
    }
  },
  components: {
    MenuItem
  },
  methods: {
    toPath(path) {
      this.$router.push({ path: path })
    }
  },
  render() {
    const { collapsed, disCollapsed, menuList, toPath } = this
    return (
      <div>
        <div style="height:58px;background: #001529;">
          <img height="55px; postation:absolute; top: 0" src={logo} alt="" />
        </div>
        <div style={collapsed ? "width: 80px;" : "width: 256px;"}>
          <a-menu
            // default-selected-keys={['1']}
            // default-open-keys={['sub1']}
            selectedKeys={[this.$route.path]}
            mode="inline"
            theme="dark"
            style="width:100%; height: 100vh;text-align: start;"
            inlineCollapsed={collapsed}
          >
            {(menuList || []).map(item => {
              if (item.children) {
                return (
                  <a-sub-menu key={item.key}>
                    <span slot="title"><a-icon type="mail" /><span>{item.name}</span></span>
                    <MenuItem menuInfo={item.children} ></MenuItem>
                  </a-sub-menu>)
              } else {
                return (<a-menu-item key={item.key} to={item.path}>
                  <a-icon type="pie-chart" />
                  <span>{item.name}</span>
                </a-menu-item>)
              }
            })
            }
          </a-menu>
        </div >
      </div>

    )
  }
}

以上就是用vue-ant UI框架来写jsx无限菜单的全部内容。
以上是我个人的看法，如有问题请联系我