如何在MUI React TreeView中实现重复添加新树节点的功能？

核心思路 #

MUI TreeView是React组件，不能用原生DOM操作（比如appendChild）来添加节点，必须通过React状态驱动视图更新——把树的结构存在状态里，添加节点时更新状态，组件会自动重新渲染。

实现步骤 #

1. 定义树节点数据结构 #

先确定每个节点的数据格式，包含唯一标识、显示内容、子节点数组：

// 示例初始树结构
const initialTreeData = [
  {
    nodeId: uuid().toString(),
    label: (
      <Typography sx={{ color: "green", fontWeight: "bold" }} variant="h6">
        {chosenModelName}
      </Typography>
    ),
    children: [
      {
        nodeId: uuid().toString(),
        label: <TestSampleDialogue arrayList={AttributesAndRelations} />,
        children: []
      }
    ]
  }
];

2. 用状态管理树结构 #

在组件中通过useState维护树数据：

import { useState } from 'react';
import { TreeView } from '@mui/x-tree-view';
import { uuid } from 'uuidv4';

// 组件内部代码
const [treeData, setTreeData] = useState(initialTreeData);

3. 递归渲染TreeItem #

写一个递归函数，将树数据转换为StyledTreeItem组件，同时给每个节点绑定点击事件：

const renderTreeItems = (nodes) => {
  return nodes.map((node) => (
    <StyledTreeItem
      key={node.nodeId}
      nodeId={node.nodeId}
      label={node.label}
      onClick={() => handleNodeClick(node.nodeId)}
    >
      {node.children.length > 0 && renderTreeItems(node.children)}
    </StyledTreeItem>
  ));
};

在TreeView中调用这个渲染函数：

<TreeView
  aria-label="customized"
  defaultCollapseIcon={<MinusSquare />}
  defaultExpandIcon={<PlusSquare />}
  defaultEndIcon={<CloseSquare />}
>
  {renderTreeItems(treeData)}
</TreeView>

4. 实现点击节点添加子节点的逻辑 #

4.1 控制对话框与节点添加逻辑

添加对话框状态与节点更新函数：

import { Dialog, DialogTitle, DialogContent, TextField, DialogActions, Button } from '@mui/material';

// 组件内部状态
const [openDialog, setOpenDialog] = useState(false);
const [targetNodeId, setTargetNodeId] = useState(null); // 记录要添加子节点的父节点ID
const [newNodeLabel, setNewNodeLabel] = useState(''); // 新节点显示内容

// 点击节点触发对话框
const handleNodeClick = (nodeId) => {
  setTargetNodeId(nodeId);
  setOpenDialog(true);
};

// 关闭对话框
const handleDialogClose = () => {
  setOpenDialog(false);
  setNewNodeLabel('');
};

// 更新树数据，添加新节点
const handleAddNode = () => {
  if (!targetNodeId || !newNodeLabel) return;

  // 递归找到目标节点并追加子节点
  const updateTree = (nodes) => {
    return nodes.map((node) => {
      if (node.nodeId === targetNodeId) {
        return {
          ...node,
          children: [
            ...node.children,
            {
              nodeId: uuid().toString(),
              label: <Typography>{newNodeLabel}</Typography>, // 可自定义标签组件
              children: []
            }
          ]
        };
      }
      if (node.children.length > 0) {
        return { ...node, children: updateTree(node.children) };
      }
      return node;
    });
  };

  setTreeData(updateTree(treeData));
  handleDialogClose();
};

4.2 渲染MUI对话框

在组件JSX中添加对话框：

<Dialog open={openDialog} onClose={handleDialogClose}>
  <DialogTitle>添加新节点</DialogTitle>
  <DialogContent>
    <TextField
      autoFocus
      margin="dense"
      label="节点名称"
      type="text"
      fullWidth
      value={newNodeLabel}
      onChange={(e) => setNewNodeLabel(e.target.value)}
    />
  </DialogContent>
  <DialogActions>
    <Button onClick={handleDialogClose}>取消</Button>
    <Button onClick={handleAddNode}>添加</Button>
  </DialogActions>
</Dialog>

关键说明 #

• 所有节点操作都通过更新treeData状态实现，完全符合React数据驱动的理念，避免直接操作DOM导致的兼容性问题。
• 递归函数updateTree负责精准找到目标父节点并追加新子节点，保证每次添加后树结构的正确性。
• 点击任意节点都会触发对话框，输入内容后即可为该节点添加新子节点，支持重复执行添加操作。

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