「树形结构」基于 Antd 实现一个动态增加子节点+可拖拽的树

效果

如图所示

实现

import { createRoot } from 'react-dom/client';
import React, { useState } from 'react';
import { Tree, Input, Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';

const { TreeNode } = Tree;
const { Search } = Input;

const initialData = [
  {
    title: 'Root Node',
    key: '0',
    children: [{
      title: ' Node',
    key: '1',
    }],
  },
];

const DynamicTree = () => {
  const [treeData, setTreeData] = useState(initialData);
  const [expandedKeys, setExpandedKeys] = useState(['0']);
  const [autoExpandParent, setAutoExpandParent] = useState(true);

  const onExpand = (expandedKeys) => {
    setExpandedKeys(expandedKeys);
    setAutoExpandParent(false);
  };

  const addNode = (key, title = 'New Node') => {
    const addNodeRecursively = (nodes) => {
      return nodes.map((node) => {
        if (node.key === key) {
          const newNode = {
            title,
            key: `${key}-${node.children ? node.children.length : 0}`,
            children: [],
          };
          return {
            ...node,