react给树增加节点的方法：1、引入antd的树形控件，并通过“const treeData = […]”实现tree形组件；2、把当前节点的key值传递过去，然后遍历data数组；3、在遍历数组增加节点时，通过嵌套数组对象的查询算法实现增加节点即可。
onClose(item.key, item.defaultValue)} /> onSave(item.key)} /> ); } else { item.title = ( {item.value} onEdit(item.key)} /> onAdd(item.key)} /> {item.parentKey === “0” ? null : ( onDelete(item.key)} /> )} ); } if (item.children) { return ( {renderTreeNodes(item.children)} ); } return ; }); return nodeArr; }; const onAdd = (key) => { if (expandedKeys.indexOf(key) === -1) { expandedKeyArr.push(key); } setExpandedKeys(expandedKeyArr.slice()); addNode(key, treeData); //useState里数据务必为immutable （不可赋值的对象），所以必须加上slice()返回一个新的数组对象 setData(treeData.slice()); }; const onEdit = (key) => { editNode(key, treeData); setData(treeData.slice()); }; const editNode = (key, data) => data.forEach((item) => { if (item.key === key) { item.isEditable = true; } else { item.isEditable = false; } item.value = item.defaultValue; // 当某节点处于编辑状态，并改变数据，点击编辑其他节点时，此节点变成不可编辑状态，value 需要回退到 defaultvalue if (item.children) { editNode(key, item.children); } }); const addNode = (key, data) => data.forEach((item) => { if (item.key === key) { if (item.children) { item.children.push({ value: “default”, key: nanoid(), // 这个 key 应该是唯一的 }); } else { item.children = []; item.children.push({ value: “default”, key: nanoid(), }); } return; } if (item.children) { addNode(key, item.children); } }); const onChange = (e, key) => { changeNode(key, e.target.value, treeData); setData(treeData.slice()); }; const changeNode = (key, value, data) => data.forEach((item) => { if (item.key === key) { item.value = value; } if (item.children) { changeNode(key, value, item.children); } }); const onSave = (key) => { saveNode(key, treeData); setData(treeData.slice()); }; const saveNode = (key, data) => data.forEach((item) => { if (item.key === key) { item.defaultValue = item.value; } if (item.children) { saveNode(key, item.children); } item.isEditable = false; }); const onClose = (key, defaultValue) => { closeNode(key, defaultValue, treeData); setData(treeData); }; const closeNode = (key, defaultValue, data) => data.forEach((item) => { item.isEditable = false; if (item.key === key) { item.value = defaultValue; } if (item.children) { closeNode(key, defaultValue, item.children); } }); const onDelete = (key) => { deleteNode(key, treeData); setData(treeData.slice()); }; const deleteNode = (key, data) => data.forEach((item, index) => { if (item.key === key) { data.splice(index, 1); return; } else { if (item.children) { deleteNode(key, item.children); } } }); return ( {renderTreeNodes(data)} );}
登录后复制推荐学习：《react视频教程》
以上就是react怎么给树增加节点的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2921746.html
