React中如何为树形结构添加子节点及管理树状态？

核心思路是将整个树形数据的状态集中在顶层父组件维护，遵循React单向数据流原则，子组件仅负责渲染和触发操作，以此实现整棵树的访问、增删节点，最终轻松导出完整JSON结构。

1. 定义树形数据结构 #

先约定每个节点的基础结构，包含唯一标识、节点名称、子节点数组：

const initialTree = [
  {
    id: '1',
    name: '父节点1',
    children: [
      { id: '1-1', name: '子节点1-1', children: [] },
      { id: '1-2', name: '子节点1-2', children: [] }
    ]
  },
  {
    id: '2',
    name: '父节点2',
    children: []
  }
];

2. 顶层父组件：管理状态与操作方法 #

父组件维护树形状态，并实现增删节点的递归方法，同时提供导出JSON的功能：

import { useState } from 'react';
import TreeNode from './TreeNode';

function TreeManager() {
  const [tree, setTree] = useState(initialTree);

  // 递归查找父节点并添加子节点
  const addChildNode = (parentId, newNode) => {
    const updateTree = (nodes) => nodes.map(node => {
      if (node.id === parentId) {
        return { ...node, children: [...node.children, newNode] };
      }
      return node.children.length ? { ...node, children: updateTree(node.children) } : node;
    });
    setTree(updateTree(tree));
  };

  // 递归查找并删除目标节点
  const deleteNode = (targetId) => {
    const updateTree = (nodes) => nodes.filter(node => {
      if (node.id === targetId) return false;
      if (node.children.length) node.children = updateTree(node.children);
      return true;
    });
    setTree(updateTree(tree));
  };

  // 导出完整树形结构为JSON
  const exportToJson = () => {
    const jsonStr = JSON.stringify(tree);
    // 此处可直接发送至后端
    console.log(jsonStr);
  };

  return (
    <div>
      <button onClick={exportToJson}>导出JSON</button>
      {tree.map(node => (
        <TreeNode
          key={node.id}
          node={node}
          addChild={addChildNode}
          deleteNode={deleteNode}
        />
      ))}
    </div>
  );
}

export default TreeManager;

3. 子节点组件：递归渲染与触发操作 #

子组件接收自身节点数据和操作方法，渲染节点并递归渲染子节点：

import { useState } from 'react';

function TreeNode({ node, addChild, deleteNode }) {
  const [newChildName, setNewChildName] = useState('');

  const handleAddChild = () => {
    if (!newChildName.trim()) return;
    const newNode = {
      id: `${node.id}-${node.children.length + 1}`,
      name: newChildName,
      children: []
    };
    addChild(node.id, newNode);
    setNewChildName('');
  };

  return (
    <div style={{ marginLeft: '20px', marginTop: '8px' }}>
      <div>
        <span>{node.name}</span>
        <button onClick={() => deleteNode(node.id)} style={{ marginLeft: '10px' }}>删除</button>
      </div>
      <div style={{ marginTop: '5px' }}>
        <input
          type="text"
          value={newChildName}
          onChange={(e) => setNewChildName(e.target.value)}
          placeholder="子节点名称"
        />
        <button onClick={handleAddChild} style={{ marginLeft: '5px' }}>添加子节点</button>
      </div>
      {/* 递归渲染子节点 */}
      {node.children.map(child => (
        <TreeNode
          key={child.id}
          node={child}
          addChild={addChild}
          deleteNode={deleteNode}
        />
      ))}
    </div>
  );
}

export default TreeNode;

进阶优化：避免Props穿透 #

如果树形层级很深，逐层传递props会很繁琐，可以用Context API统一管理操作方法：

创建TreeContext #

// TreeContext.js
import { createContext, useContext } from 'react';

const TreeContext = createContext();

export function TreeProvider({ children, addChild, deleteNode }) {
  return (
    <TreeContext.Provider value={{ addChild, deleteNode }}>
      {children}
    </TreeContext.Provider>
  );
}

export function useTree() {
  return useContext(TreeContext);
}

修改父组件使用Provider #

// TreeManager.js
import { TreeProvider } from './TreeContext';

// ...其他代码不变
return (
  <TreeProvider addChild={addChildNode} deleteNode={deleteNode}>
    <div>
      <button onClick={exportToJson}>导出JSON</button>
      {tree.map(node => (
        <TreeNode key={node.id} node={node} />
      ))}
    </div>
  </TreeProvider>
);

子组件通过Hook获取方法 #

// TreeNode.js
import { useTree } from './TreeContext';

function TreeNode({ node }) {
  const { addChild, deleteNode } = useTree();
  // ...其余逻辑不变
}

这种方案完全符合React状态管理逻辑，所有状态集中在顶层，既能实现任意节点的增删操作，又能随时获取完整树形结构转换为JSON，满足后端交互需求。

内容的提问来源于stack exchange，提问作者Dontea