vue使用render + jsx

有些情况在vue中使用render函数渲染页面,会比模板方便的多,毕竟js的逻辑要比 v-if 和v-for好用的多

这是我用vue + element-ui写的一个用户菜单.

用数据来渲染,如果使用模板会很麻烦,逻辑也会变得异常复杂.

因为需要判断哪些菜单有子菜单,这还是只有一层子菜单的情况, 如果有更深的子菜单使用模板会更加的复杂

render () {
  let subMenu = this.menuList.map((item, index) => {
    // 有子菜单的情况
    if (Array.isArray(item)) {
      return (
        <el-submenu index={(index + '')}>
          <template slot="title">
            <img class="menu-icon"
                  src={require(`@assets/images/${item[0].meta.parentDefautlIcon}`)}
                  alt />
            <img class="menu-icon menu-icon_2"
                  src={require(`@assets/images/${item[0].meta.parentSelectedIcon}`)}
                  alt />
            <span>{item[0].meta.parent}</span>
          </template>
          {item.map((item2) => {
            return (
              <el-menu-item index={item2.path}>
                <img class="menu-right-jiantou"
                    src={require(`@assets/images/${item2.meta.selectedIcon}`)} />
                    {item2.meta.title}
                </el-menu-item>
            )
          })}
        </el-submenu>
      )
    } else {
      // 没有子菜单的情况
      return (
        <el-menu-item index={item.path}>
          <img class="menu-icon"
            src={require(`@assets/images/${item.meta.defautlIcon}`)}
            alt />
          <img class="menu-icon menu-icon_3"
            src={require(`@assets/images/${item.meta.selectedIcon}`)}
            alt />
          <span slot="title">{item.meta.title}</span>
        </el-menu-item>
      )
    }
  })
  return (
    <el-menu defaultActive={this.currentPath}
      class="el-menu-main"
      vOn:select={this.selects}
      background-color="#fff"
      text-color="#777E8C"
      active-text-color="#424754"
      uniqueOpened={true}
      router
      ref="menus">
      {subMenu}
    </el-menu>
  )
}