vue中使用jsx语法

背景：使用ant-design-vue进行开发。因为涉及到不知道多少层的数据显示，所以普通模板应该已经满足不了这个需求，正好看到有人的代码里面写了一个JSX的组件，于是参考自己改了一些

实现

import Menu from 'ant-design-vue/es/menu';
import Icon from 'ant-design-vue/es/icon';
import DropDown from 'ant-design-vue/es/dropdown';

const { Item, SubMenu } = Menu
// const { Button } = DropDown

export default {
    name: 'CMenu',
    props: {
        menu: {
            type: Array,
            required: true
        }
    },
    data () {
        return {
            selectedName: '请选择'
        }
    },
    methods: {
        renderItem (menu) {
            return menu.children && menu.children.length > 0 ? this.renderSubMenu(menu) : this.renderMenuItem(menu)
        },
        setItem (e) {
            // this.selectedName = e
            let obj = { id: e.id, name: e.domEvent.target.innerText }
            this.selectedName = obj.name
            localStorage.setItem('selectedRegion', JSON.stringify(obj))
            this.$emit('regionChange', obj)
        },
        renderMenuItem (menu) {
            return (
                <Item {...{ key: menu.id, title: menu.name }} vOn:click={this.setItem}>
                    <span>{menu.name}</span>
                </Item>
            )
        },
        renderSubMenu (menu) {
            const itemArr = []
            menu.children.forEach(item => {
                itemArr.push(this.renderItem(item))
            });
            return (
                <SubMenu {...{ key: menu.id, title: menu.name }}>
                    <span slot="title">{menu.name}</span>
                    {itemArr}
                </SubMenu>
            )
        }
    },
    render () {
        const { menu } = this
        const menuTree = menu.map(item => {
            return this.renderItem(item)
        })

        return (
            <div class="center">
                <DropDown>
                    <a vOn:click={e => e.preventDefault()} style="color:#333;">
                        {this.selectedName}
                        <Icon type="down" class="m-l-10"></Icon>
                    </a>
                    <Menu slot="overlay">
                        {menuTree}
                    </Menu>
                </DropDown>
            </div>
        )
    }
}

使用

<c-menu :menu="regions" @regionChange="regionChange"></c-menu>