React项目引入antd的树形控件实现节点增删改

前言

浏览一些主流面试题的时候，发现有的面试题让动手写一个基于antd的树形控件的增删改功能，本来以为antd的组件应该挺简单的，没想到动手做的时候还是费了不少力气。所以就打算记录一下，实现需求的整个过程。

一、 引入antd的树形控件

使用过antd的小伙伴应该都知道，使用antd就是把它的代码示例粘贴下来，然后根据自己的需求和antd提供的API进行更改。所以这里我也是找一个简单antd树形控件代码示例，不管三七二十一先粘贴进去看看结果怎么样。

import React from "react";
import {
    Tree } from "antd";

const treeData = [
  {
   
    title: "0-0",
    key: "0-0",
    children: [
      {
   
        title: "0-0-0",
        key: "0-0-0",
        children: [
          {
    title: "0-0-0-0", key: "0-0-0-0" },
          {
    title: "0-0-0-1", key: "0-0-0-1" },
          {
    title: "0-0-0-2", key: "0-0-0-2" },
        ],
      },
      {
   
        title: "0-0-1",
        key: "0-0-1",
        children: [
          {
    title: "0-0-1-0", key: "0-0-1-0" },
          {
    title: "0-0-1-1", key: "0-0-1-1" },
          {
    title: "0-0-1-2", key: "0-0-1-2" },
        ],
      },
      {
   
        title: "0-0-2",
        key: "0-0-2",
      },
    ],
  },
  {
   
    title: "0-1",
    key: "0-1",
    children: [
      {
    title: "0-1-0-0", key: "0-1-0-0" },
      {
    title: "0-1-0-1", key: "0-1-0-1" },
      {
    title: "0-1-0-2", key: "0-1-0-2" },
    ],
  },
  {
   
    title: "0-2",
    key: "0-2",
  },
];

export default function TreeDemo() {
   
  return (
    <div>
      <Tree  treeData={
   treeData} />
    </div>
  );
}

这里就实现了一个简单的tree形组件，但是这个组件除了可以浏览之外，基本没什么作用，所以还需要对它进行再度改造。

二、 改造组件代码结构

一般使用antd组件的时候，最重要的就是使用antd提供的API，咱们虽然不会写，但是会用应该还是挺容易的。在浏览树形控件的API时发现，<Tree/>组件有个子组件<TreeNode/>，它就是组成整个树形控件的最小单元。所以我们如果要实现增删改的话，就要在这个<TreeNode/>组件上下功夫。根据这个思路然后改造成如下的样子。

import React, {
    useState } from "react";
import {
    Tree } from "antd";

const {
    TreeNode } = Tree;

const treeData = [
  {
   
    value: "0",
    key: "0",
    children: [
      {
   
        value: "0-1",
        key: "0-1",
      },
      {
   
        value: "0-2",
        key: "0-2",
      },
    ],
  },
];

export default function TreeDemo() {
   
  const [data, setdata] = useState(treeData);
  const renderTreeNodes = (data) => {
   
    let nodeArr = data.map((item) => {
   
      item.title = <span>{
   item.value}</span>;

      if (item.children) {
   
        return (
          <TreeNode title={
   item.title} key={
   item.key} dataRef={
   item}>
            {
   renderTreeNodes(item.children)}
          </TreeNode>
        );
      }

      return <TreeNode title={
   item.title} key={
   item.key} />;
    });

    return nodeArr;
  };

  return (
    <div>
      <Tree>{
   renderTreeNodes(data)}</Tree>
    </div>
  );
}

然后就是如下的样子：

这里要说明的一点是<TreeNode/>的title接收的是ReactNode类型数据，所以大家可以根据这个来自己定义要展示数据的样式，比如加上icon之类的。然后到这里，大家应该就知道了，需求里面不是说要有增删改的功能吗，正好可以借助这个title来展示一下，胜利就在眼前，接着改造代码。

import React, {
    useState } from "react";
import {
    Tree } from "antd";
import {
   
    EditOutlined,
    PlusOutlined,
    MinusOutlined,
  } from "@ant-design/icons";

const {
    TreeNode } = Tree