vue3中使用jsx创建一个树形数据结构

在vue3脚手架中默认支持jsx写法，所以直接创建一个 tree.jsx 文件

import { reactive, ref, watch, onMounted, inject, computed, defineComponent } from 'vue';

export default{
    props:{
        
    },
    setup(props,{attrs,emit,slots}){
        //数据
        let list = reactive([
            {
                id:1,name:'level-1',childList:[
                    {
                        id:3,name:'level-1.1'
                    },
                    {
                        id:4,name:'level-1.2',childList:[
                            {id:5,name:'level-1.2.1'}
                        ]
                    },
                ]
            },
            {id:2,name:'level-2'},
        ])
        //添加树是否展开状态
        const transOptions = (tree)=>{
            tree.forEach(item=>{
                item.isExpand = false;
                item.childList && transOptions(item.childList)
            })
        }
        transOptions(list);
        //改变展开状态
        const changeExpandStatus = (node)=>{
            node.isExpand = !node.isExpand;
        }
        //渲染节点树
        const renderTree = (tree)=>{
            return (
                
 
                    { tree.map(item=>{
                        return (
                            

                                

                                    changeExpandStatus(item)}>
                                        {item.isExpand?'-':'+'}
                                    
                                    {item.name}
                                
                                { item.childList ? (
                                    

                                        {renderTree(item.childList)}
                                    
                                ) : null }
                            
                        )
                    }) } 
                
            )
        }

        
        return () => (
            <>
                
渲染的数据：
                
{renderTree(list)}
            
        )
    },
}