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

你可以通过以下步骤来实现基于React Antd的异步加载两边树形穿梭框：

1. 安装Antd组件库和相关依赖：

npm install antd --save
npm install react --save
npm install react-dom --save

2. 引入需要的Antd组件：

import { Tree, Transfer } from 'antd';

3. 创建两个Tree组件，分别用于左右两侧的树形结构：

const leftTree = (
  <Tree
    // 左侧树形结构的props
  />
);

const rightTree = (
  <Tree
    // 右侧树形结构的props
  />
);

4. 创建Transfer组件，将左右两侧的树形结构传入：

const TransferTree = () => (
  <Transfer
    dataSource={[]}
    targetKeys={[]}
    render={item => item.title}
    onChange={this.handleChange}
    showSearch
    lazy
    style={{ height: 300 }}
  >
    {leftTree}
    {rightTree}
  </Transfer>
);

5. 在左右两侧的Tree组件中，通过异步加载数据来生成树形结构。例如，可以通过Axios库从后端API接口获取数据并生成树形结构：

import axios from 'axios';

class TreeDataLoader extends React.Component {
  state = {
    treeData: [],
  };

  componentDidMount() {
    this.fetchData();
  }

  fetchData = () => {
    axios.get('/api/tree').then(response => {
      const treeData = this.transformData(response.data);
      this.setState({ treeData });
    });
  };

  transformData = data => {
    // 将从后端API接口获取的数据转换为树形结构
  };

  render() {
    const { treeData } = this.state;
    return (
      <Tree
        // Tree的props
        treeData={treeData}
      />
    );
  }
}

6. 将左右两侧的树形结构传入Transfer组件中即可完成异步加载的两边树形穿梭框：

const TransferTree = () => (
  <Transfer
    dataSource={[]}
    targetKeys={[]}
    render={item => item.title}
    onChange={this.handleChange}
    showSearch
    lazy
    style={{ height: 300 }}
  >
    <TreeDataLoader />
    <TreeDataLoader />
  </Transfer>
);