基于react antd的异步加载树形穿梭框

可以使用`antd`中的`TreeSelect`和`Transfer`组件来实现异步加载树形穿梭框。

首先，需要使用`TreeSelect`组件来渲染树形结构。在`TreeSelect`组件中，我们需要设置`treeData`属性来指定树形结构的数据源，并设置`loadData`属性来指定异步加载数据的方法。

接着，需要使用`Transfer`组件来实现穿梭框。在`Transfer`组件中，我们需要设置`dataSource`属性来指定数据源，并设置`targetKeys`属性来指定已选择的数据项。同时，我们需要使用`render`属性来自定义每个数据项的渲染方式。

最后，我们需要在异步加载数据的方法中使用`Promise`来返回数据，并在`TreeSelect`组件的`loadData`属性中使用`async/await`来等待数据加载完成后再更新树形结构的状态。

下面是一个基于`react`和`antd`的异步加载树形穿梭框的示例代码：

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

const loadData = async (treeNode) => {
  // 获取子节点数据
  const childNodes = await fetch(`data/${treeNode.value}.json`).then((res) => res.json());
  // 将子节点数据添加到树形结构中
  treeNode.children = childNodes;
};

const formatData = (data) => {
  // 将数据转换为树形结构
  const treeData = data.map((item) => ({
    title: item.label,
    value: item.value,
    isLeaf: !item.hasChildren,
  }));
  return treeData;
};

const renderItem = (item) => {
  // 自定义数据项的渲染方式
  return <span>{item.title}</span>;
};

const AsyncTreeTransfer = () => {
  const [treeData, setTreeData] = useState([]);
  const [targetKeys, setTargetKeys] = useState([]);

  const handleChange = (keys) => {
    setTargetKeys(keys);
  };

  const handleTreeSelectLoadData = async (treeNode) => {
    if (treeNode.children) {
      return;
    }
    await loadData(treeNode);
    setTreeData([...treeData]);
  };

  const handleTransferSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
    setTargetKeys([...targetSelectedKeys]);
  };

  const handleTransferChange = (keys, direction, moveKeys) => {
    setTargetKeys([...keys]);
  };

  const handleDataLoad = async () => {
    // 加载根节点数据
    const rootNodes = await fetch('data/root.json').then((res) => res.json());
    // 格式化根节点数据
    const formattedData = formatData(rootNodes);
    setTreeData(formattedData);
  };

  return (
    <div>
      <TreeSelect
        style={{ width: '100%' }}
        placeholder="请选择"
        treeData={treeData}
        loadData={handleTreeSelectLoadData}
      />
      <Transfer
        dataSource={treeData}
        targetKeys={targetKeys}
        onChange={handleTransferChange}
        onSelectChange={handleTransferSelectChange}
        render={renderItem}
      />
      <button onClick={handleDataLoad}>加载数据</button>
    </div>
  );
};

export default AsyncTreeTransfer;

在上面的代码中，我们首先定义了一个`loadData`方法来异步加载树形结构的子节点数据。在`loadData`方法中，我们使用`fetch`方法来获取子节点数据，并使用`Promise`来返回数据。接着，我们在`handleTreeSelectLoadData`方法中使用`async/await`来等待数据加载完成后再更新树形结构的状态。

在`AsyncTreeTransfer`组件中，我们使用`useState`来定义`treeData`和`targetKeys`两个状态。`treeData`表示树形结构的数据源，`targetKeys`表示已选择的数据项。我们使用`TreeSelect`和`Transfer`组件来渲染树形结构和穿梭框。在`TreeSelect`组件中，我们使用`loadData`属性来指定异步加载数据的方法。在`Transfer`组件中，我们使用`dataSource`属性来指定数据源，`targetKeys`属性来指定已选择的数据项，并使用`render`属性来自定义每个数据项的渲染方式。最后，我们在`handleDataLoad`方法中加载根节点数据，并在点击按钮时触发。

需要注意的是，在实际应用中，我们需要根据业务需求来修改异步加载数据的方法、数据格式化方法以及数据源路径等相关参数。