react TreeSelect异步加载树案例

可以参考下面这个示例，在 React 中使用 Ant Design 的 TreeSelect 组件实现异步加载树结构：

import React, { useState, useEffect } from 'react';
import { TreeSelect } from 'antd';

const { TreeNode } = TreeSelect;

// 模拟异步加载数据
const loadData = async (id) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        { id: `${id}-1`, title: `Leaf ${id}-1` },
        { id: `${id}-2`, title: `Leaf ${id}-2` },
      ]);
    }, 1000);
  });
};

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

  useEffect(() => {
    // 初始化根节点数据
    loadData('root').then((data) => {
      setTreeData(data);
    });
  }, []);

  const handleLoadData = async (treeNode) => {
    const { id } = treeNode.props;
    const data = await loadData(id);
    treeNode.props.dataRef.children = data;
    setTreeData([...treeData]);
  };

  const renderTreeNodes = (data) => {
    return data.map((item) => {
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.id} id={item.id} dataRef={item}>
            {renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode title={item.title} key={item.id} id={item.id} dataRef={item} isLeaf />;
    });
  };

  return (
    <TreeSelect
      style={{ width: '100%' }}
      dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
      placeholder="请选择"
      loadData={handleLoadData}
    >
      {renderTreeNodes(treeData)}
    </TreeSelect>
  );
};

export default AsyncTreeSelect;

在上面的代码中，loadData 函数模拟异步加载数据的过程，可以根据实际情况进行修改。组件初始化时，会调用 loadData 函数加载根节点数据，并将其存储在 state 中。当用户点击某个节点时，会根据该节点的 id 异步加载子节点数据，并更新该节点的 children 属性，最后更新 state，从而触发 TreeSelect 的重新渲染。通过递归方式渲染所有的节点，并将 dataRef 属性设置为节点数据，方便后续操作。最后将节点组件作为 TreeSelect 的子组件，即可生成异步加载树结构。