antd Tree控件如何动态添加删除节点，急！！！

async getAllEntry() //保存数据的
{
let menus =
[
{ id : "1" , name : "IT开发部" } ,
{ id : "2" , name : "行政部" } ,
{ id : "21" , name : "会计部" , parentId : "2" } ,
{ id : "22" , name : "出纳部" , parentId : "2" } ,
{ id : "3" , name : "咨询部" } ,
]
return menus;
}

 <DirectoryTree
         multiple
         defaultExpandAll
         onSelect={this.onSelect}
         onExpand={this.onExpand}
        >
        {
            ( function()
            {

             let subOrg = function(parentId)

                    {
                        return orgs.filter( org => parentId ? ( org.parentId == parentId ) : ( org.parentId == null ) ).map( org =>
                            {
                                return ( 
                                        <TreeNode title={org.name} key={org.id} >
                                            {
                                                subOrg( org.id )
                                            }
                                        </TreeNode>                        
                                    );
                            }   )
                    };
                return subOrg();
            } )()
        }
      </DirectoryTree>

                这个是我写的树结构，现在想要实现：点击一个按钮，就在当前节点下创建或者删除一个新的子节点。

https://blog.csdn.net/qq_37210523/article/details/83543746

antd 官方给出解释: 从性能考虑，父节点信息是不透出的.需要自己map出来
在添加子节点时 调用 onLoadData 函数 onLoadData = treeNode => 这里的treeNode就是你点击的父节点（红色圈中的），
要往该节点添加子节点的代码==》
onLoadData = treeNode =>
new Promise(resolve => {
if (treeNode.deviceName || treeNode.props.children != undefined) {
resolve();
// return;
}
setTimeout(() => {
var parentDevice;
if (treeNode.deviceName != undefined) { //点了后面的+执行
parentDevice = treeNode;
} else {//点了前面的展开
parentDevice = treeNode.props.dataRef;
}
const { dispatch } = this.props
dispatch({
type: 'devRelationship/getChildrenDev',
payload: {
parentDeviceName: parentDevice.deviceName,
relationType: 1,
companyId: 558,
}, callback: res => {
//若是添加子节点则res是添加新的子节点后该父节点的所有子节点，
parentDevice.children = res
setTimeout(() => {
this.setState({
treeData: [...this.state.treeData],
});
resolve();
}, 0);

                    }
                })

            }, 0);
        });

                    若是想删除子节点，你可能会以为，我调用onLoadData函数，参数传要删除节点的父节点，问题时antd  的tree 父节点信息是不透出的.需要自己map出来，如要map那么就要写一个递归，一层层查，这是我们可以这样做，想想所有节点是如何渲染到界面的，官网的例子如下
                      renderTreeNodes = data =>
data.map(item => {
  if (item.children) {
    return (
      <TreeNode title={item.title} key={item.key} dataRef={item}>
        {this.renderTreeNodes(item.children)}
      </TreeNode>
    );
  }
  return <TreeNode key={item.key} {...item} />;
});
    我们可以发现，在这里就是在递归遍历所有节点，所有可以这样做：
    我的title如下：
    title={
                            <div style={{ width: '100%' }}>
                                <a style={{ color: 'red' }}>{item.deviceName}</a>
                                <Icon//节点后的减号
                                    className={styles.deleteDeviceRelation}
                                    onClick={() => this.deleteDeviceRelation(item)}
                                    type="minus-circle" />
                                <Icon//节点后的加号
                                    className={styles.operating}
                                    onClick={() => this.addDeviceRelation(item)}
                                    type="plus-circle" />
                            </div>
                        }
                                                    当点击减号调用deleteDeviceRelation函数，参数是要删除的节点
                // 删除子节点
    deleteDeviceRelation = (item) => {
       //在这里将删除的加点的标识信息存到state里，在渲染节遍历时去掉要删除的即可
                           var deleteItem = JSON.parse(JSON.stringify(this.state.deleteItem));
                deleteItem[item.deviceName] = item.deviceName;// deleteItem[节点信息中的某一属性] = 节点信息中的某一属性;
                this.setState({ deleteItem })
    }

            我的renderTreeNodes函数如下：        
            renderTreeNodes = data =>
        data.map(item => {
            // console.log(item.deviceName, this.state.deleteItem[item.deviceName])
            if (item.deviceName != this.state.deleteItem[item.deviceName]) {如果当前的item跟你存起来要删除的一致则不return
                if (item.children) {
                    return (
                        <TreeNode style={{ width: '100%' }} isLeaf={false} title={
                            <div style={{ width: '100%' }}>
                                <a style={{ color: 'red' }}>{item.deviceName}</a>
                                <Icon
                                    className={styles.deleteDeviceRelation}
                                    onClick={() => this.deleteDeviceRelation(item)}
                                    type="minus-circle" />
                                <Icon
                                    className={styles.operating}
                                    onClick={() => this.addDeviceRelation(item)}
                                    type="plus-circle" />
                            </div>
                        } key={item.key} dataRef={item}>
                            {this.renderTreeNodes(item.children)}
                        </TreeNode>
                    );
                    // }
                }
                return <TreeNode isLeaf={false} style={{ width: '100%' }} key={item.key} title={
                    <div style={{ width: '100%' }}>
                        <a style={{ color: 'red' }}>{item.deviceName}</a>
                        <Icon
                            className={styles.deleteDeviceRelation}
                            onClick={() => this.deleteDeviceRelation(item)}
                            type="minus-circle" />
                        <Icon
                            className={styles.operating}
                            onClick={() => this.addDeviceRelation(item)}
                            type="plus-circle" />
                    </div>} dataRef={item} />;
            }
        });