react+antd 递归实现树状目录操作

好的。首先，我们需要了解一下 react 和 antd 的基本知识。

React 是一个用于构建用户界面的 JavaScript 库，它提供了一种组件化的思想，让开发者可以将一个大型模块化的项目拆分成多个可嵌套、可复用、可独立开发的组件。而 antd 是一个基于 React 的 UI 组件库，提供了一系列常用的 UI 组件，如 Button、Modal、Table、Tree 等。

接下来，我们来看如何使用 react+antd 实现树状目录操作。

第一步，导入必要的依赖。我们需要导入 antd 中的 Tree、Icon 组件，以及 react 中的 useState、useEffect、Fragment 等 Hook 函数。

import { Tree, Icon } from 'antd';
import React, { useState, useEffect, Fragment } from 'react';

第二步，定义 Tree 组件。我们可以通过 useState 函数定义一个状态来保存树状目录的数据，初始化为空数组。

const DirectoryTree = () => {
  const [treeData, setTreeData] = useState([]);
  ...
  return ( ... );
}

第三步，通过 useEffect 函数来获取树状目录的数据。在 useEffect 函数中，我们可以发送 AJAX 请求获取数据，并将数据保存到之前定义的状态中。

const DirectoryTree = () => {
  const [treeData, setTreeData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios.get('/api/treeData');
      setTreeData(result.data);
    }
    fetchData();
  }, []);

  return ( ... );
}

第四步，编写递归函数。这是实现树状目录操作的关键步骤。我们可以在 Tree 组件中定义一个递归函数来遍历树状结构，并将数据渲染成一个 TreeNodes 对象。

const renderDirectoryTree = data =>
  data.map(item => {
    if (item.children) {
      return (
        <Tree.TreeNode
          title={
            <Fragment>
              <Icon type="folder" />
              {item.title}
            </Fragment>
          }
          key={item.key}
        >
          {renderDirectoryTree(item.children)}
        </Tree.TreeNode>
      );
    }
    return (
      <Tree.TreeNode
        title={
          <Fragment>
            <Icon type="file" />
            {item.title}
          </Fragment>
        }
        key={item.key}
      />
    );
  });

第五步，使用 Tree 组件渲染树状目录。在 return 语句中，我们使用 antd 的 Tree 组件和刚才定义的递归函数来渲染树状目录。

const DirectoryTree = () => {
  const [treeData, setTreeData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios.get('/api/treeData');
      setTreeData(result.data);
    }
    fetchData();
  }, []);

  const renderDirectoryTree = data =>
    data.map(item => {
      if (item.children) {
        return (
          <Tree.TreeNode
            title={
              <Fragment>
                <Icon type="folder" />
                {item.title}
              </Fragment>
            }
            key={item.key}
          >
            {renderDirectoryTree(item.children)}
          </Tree.TreeNode>
        );
      }
      return (
        <Tree.TreeNode
          title={
            <Fragment>
              <Icon type="file" />
              {item.title}
            </Fragment>
          }
          key={item.key}
        />
      );
    });

  return (
    <Tree showLine>
      {renderDirectoryTree(treeData)}
    </Tree>
  );
};

示例1：生成一个静态树状目录

const treeData = [
  {
    title: 'folder1',
    key: '1',
    children: [
      { title: 'file1', key: '1-1' },
      { title: 'file2', key: '1-2' },
    ],
  },
  {
    title: 'folder2',
    key: '2',
    children: [
      {
        title: 'folder2-1',
        key: '2-1',
        children: [
          { title: 'file3', key: '2-1-1' },
          { title: 'file4', key: '2-1-2' },
        ],
      },
    ],
  },
];
...
return (
  <Tree showLine>
    {renderDirectoryTree(treeData)}
  </Tree>
);

示例2：从服务器获取树状目录数据

const [treeData, setTreeData] = useState([]);

useEffect(() => {
  const fetchData = async () => {
    const result = await axios.get('/api/treeData');
    setTreeData(result.data);
  };
  fetchData();
}, []);

return (
  <Tree showLine>
    {renderDirectoryTree(treeData)}
  </Tree>
);

以上是使用 react+antd 实现树状目录操作的完整攻略。