此次借助了antd-moblie组件中的Modal组件，实现了tree的增加、删除、编辑等功能。

1.首先就是要确定数据的数据结构，此次是一个三层的树结构。所以数据结构如下所示：

state = {
        nav_data: {
            des: '公司管理',
            isToggleOn: false,
            list: [{
                des: '经理',
                id: 0,
                tag: '',
                isToggleOn: false,
                child: [{
                    des: '小蓝',
                    PId: 0,
                }, {
                    des: '小绿',
                    PId: 0,
                }, {
                    des: '大黑',
                    PId: 0,
                }]
            },
            {
                des: '主管',
                id: 1,
                tag: '',
                isToggleOn: false,
                child: [{
                    des: '小绿',
                    PId: 1,

                }, {
                    des: '小粉',
                    PId: 1,
                }, {
                    des: '大黑',
                    PId: 1,
                }]
            },

            ]
        },
    }

因为树根只有一个，所以树根没有设置id,为了第三层可以简单迅速的渲染出来，就上了pid以及id

2.增加

<button onClick={() => {
                            prompt('添加角色', '',
                                [
                                    {
                                    //取消时的处理
                                        text: '取消',
                                        onPress: value => new Promise((resolve) => {
                                            setTimeout(() => {
                                                resolve();
                                                console.log(`value:${value}`);
                                            }, 100);
                                        }),
                                    },
                                    {
                                        text: '确定',
                                        onPress: value => new Promise((resolve, reject) => {
                                            //简单的正则验证
                                            if (value.length > 0 && value.length < 4) {
                                                resolve();
                                                const des_arr = list.map((item) => {
                                                    return item.des
                                                })
                                                //判断数组是否有重复项
                                                if (des_arr.includes(value)) { Toast.info('角色已存在', 1); return }
                                                //如果一切顺利就更新数组，把新加的信息加入数组里
                                                list.map((item, index) => {
                                                    this.setState({
                                                        nav_data: {
                                                            ...this.state.nav_data,
                                                            list: [...this.state.nav_data.list,
                                                            {
                                                                PId: 0,
                                                                des: value,
                                                                id: index + 1,
                                                                                                                                                isToggleOn: false
                                                                child: []
                                                            }]
                                                        }


                                                    }, () => { console.log(this.state.nav_data.list) })
                                                })

                                            } else {
                                                Toast.info('请按要求输入角色名称', 1);
                                                reject();
                                            }

                                        }),

                                    }
                                ], 'default', '默认值, ['请输入角色名称'])

                        }}>+</button>
                                                                

3.编辑

编辑操作与添加操作基本类似，需要验证正则，判断有没有重复，最后通过之后，将value值赋值需要改的数据上，然后更新列表

4.删除

 handledeleteStem = (e) => {
        const { nav_data: { list } } = this.state
        console.log(e.target.parentNode.parentNode.childNodes[0].innerHTML)
        // 获取到选中那一行的值
        let value = e.target.parentNode.parentNode.childNodes[0].innerHTML
        list.map((item) => {
            if (item.des === value) {
                console.log(item)
                // 判断里面是否有孩子
                if (item.child.length !== 0) {
                    this.deleteMoadal(value, list)
                }
                else if (item.child.length === 0) {
                //获取选中哪一行的值，与数组中相同的值的位置，并删除
                    list.splice(list.findIndex(item => item.des === value), 1)
                    //更新列表
                    this.setState({
                        nav_data: {
                            ...this.state.nav_data,
                            list: [...this.state.nav_data.list]
                        }
                    }, () => { console.log(list) });
                    Toast.info('删除成功', 1);
                }
            }
        })
    }
    //如果当前茎下面有叶子，就蹦出来弹窗，再次确认是否要删除
     deleteMoadal(value, list) {
        const alert = Modal.alert;
        return (
            alert('删除', '你确定删除吗？', [
                { text: '取消', onPress: () => console.log('cancel') },
                {
                    text: '确定', onPress: () => {
                        list.splice(list.findIndex(item => item.des === value), 1)
                        this.setState({
                            nav_data: {
                                ...this.state.nav_data,
                                list: [...this.state.nav_data.list]
                            }
                        }, () => { console.log(list) });
                    }
                },
            ])

        )
    }