【REACT】嵌套组件的生成

今天写了一个利用递归的方法，在页面上展示出一个树状的collapse, 样式如下：

样式

原始数据长下面这样，其中parent值为该行数据父亲的code值

   const data = [{ "code": 1000, "title": "一", "parent": 0 },
    { "code": 2000, "title": "二", "parent": 0 },
    { "code": 3000, "title": "三", "parent": 0 },
    { "code": 4000, "title": "四", "parent": 0 },
    { "code": 5000, "title": "五", "parent": 0 },
    { "code": 3010, "title": "3.1", "parent": 3000 },
    { "code": 3020, "title": "3.2", "parent": 3000 },
    { "code": 3030, "title": "3.3", "parent": 3000 },
    { "code": 3040, "title": "3.4", "parent": 3000 },
    { "code": 3050, "title": "3.5", "parent": 3000 },
    { "code": 3060, "title": "3.6", "parent": 3000 },
    { "code": 3041, "title": "3.4.1", "parent": 3040 },
    { "code": 3042, "title": "3.4.2", "parent": 3040 },
    { "code": 3043, "title": "3.4.3", "parent": 3040 }]

接下来我们用迭代的方法把这组数变个样，形成一个树状结构

const sortData = (data) => {
        let dataMap = new Map();

        data.forEach(element => {
            element.child = [];
            dataMap.set(element.code, element)
        });//将数据转变成map类型，key值为原始数据的code

        let newData = []
        data.forEach(element => {
            if (element.parent !== 0) {//如果这个值有父节点，就将他放到相对应父节点的child中
                dataMap.get(element.parent).child.push(element)
            }
            else {
                newData.push(element)//如果是父节点，就存进先前定义的cards数组里
            }
        });
        return newData;
    }

const newData = sortData(data)
我们console出来的树状结构的data是这样的：

结果

我的思路及页面设计是这样的：首先判断他是不是最外层父节点，如果是最外层父节点，且其下没有子节点（即parent=0 &&child.length==0），则生成一个panel，里面嵌套一个Card组件；如果是父节点，且有子节点，则在外面套一个panel，在panel里面再进行loop方法；如果是叶子结点，那个他没有child，且parent！=0，因此只需要输出一个Card组件就行啦。
代码如下：

const loop = data => data.map((item) => {
        const index = item.child;
        const content = index.length > 0 ? (
            
                
                    {loop(item.child)}
                
            

        ) : (
                item.parent == '0' ? (
                    
                        
                            
                                
                                    {item.title}
                                
                            
                        
                    
                ) : (
                        
                            
                                {item.title}
                            
                        )
            );
        return 
{content}
;
    });

我使用的前端框架是ANTD，所以在return中这么写：

       {loop(newData)}
 

记住！在loop（）外一定要套上,不然其中panel显示不出来。
另外，key值也是需要的，因为在递归过程中会形成多个组件，如果不写会报错。

【完】