antd的异步加载树组件使用

import { TreeSelect } from 'antd';

class Demo extends React.Component {
  state = {
    value: undefined,
    treeData: [
      { id: 1, pId: 0, value: '1', title: 'Expand to load' },
      { id: 2, pId: 0, value: '2', title: 'Expand to load' },
      { id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true },
    ],
  };

  genTreeNode = (parentId, isLeaf = false) => {
    const random = Math.random()
      .toString(36)
      .substring(2, 6);
    return {
      id: random,
      pId: parentId,
      value: random,
      title: isLeaf ? 'Tree Node' : 'Expand to load',
      isLeaf,
    };
  };

  onLoadData = treeNode =>
    new Promise(resolve => {
      const { id } = treeNode.props;
      setTimeout(() => {
        this.setState({
          treeData: this.state.treeData.concat([
            this.genTreeNode(id, false),
            this.genTreeNode(id, true),
          ]),
        });
        resolve();
      }, 300);
    });

  onChange = value => {
    console.log(value);
    this.setState({ value });
  };

  render() {
    const { treeData } = this.state;
    return (
      <TreeSelect
        treeDataSimpleMode
        style={{ width: '100%' }}
        value={this.state.value}
        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
        placeholder="Please select"
        onChange={this.onChange}
        loadData={this.onLoadData}
        treeData={treeData}
      />
    );
  }
}

ReactDOM.render(<Demo />, mountNode);

• 以上是antd中关于异步加载树节点的例子，下面来一个一个讲。
  • 首先是treeData，这个是构成树的数据。
    样例中给的是
    { id: 1, pId: 0, value: '1', title: 'Expand to load', isLeaf: true }
    其中id和pId分别表示的是自己的id和自己父节点的id，两种不能相同，因为不可能一个节点又是子节点又是父节点。所以自己在获取到初始数据的时候最好设Pid为0，id为index+1(indx从0开始)，这样第一批子节点的父节点id就都为0了。至于value只要把他设置成和id一样即可，组件就是通过value来获取当前选中的条目。title就是节点的值，想让节点显示啥就设置成啥，isLeaf是是否有子节点的意思，所以一般用这个组件最好是让后台在参数里加上数据是否有子节点。
  • 其次是onChange方法。

      onChange = value => {
      console.log(value);
      this.setState({ value });
      };
  

  这个方法是在点击树节点时触发的，点击后组件会默认暴露出value的值，所以一般如果想获取点击节点的其他属性的话一般都是要通过这个value来获取(因为组件默认是不暴露其他属性的，如果真想要其他的方式获取可以去看官方的文档，我因为时间紧就用自己的办法了)。我自己的办法是用value的值去循环匹配数组里所有数据的value，因为之前我是默认设置成value和id一样，所以是能保证value的值是唯一的，且我在使用的时候数据量也不是很大，循环也没啥问题。
  • onLoadData方法

  onLoadData = treeNode =>
  new Promise(resolve => {
    const { id } = treeNode.props;
    setTimeout(() => {
      this.setState({
        treeData: this.state.treeData.concat([
          this.genTreeNode(id, false),
          this.genTreeNode(id, true),
        ]),
      });
      resolve();
    }, 300);
  });
  

  这个方法的作用是在点击树节点前的加载图标时，进行数据的异步加载。treeNode表示的是当前点击加载的节点，很多加载所需要的数据都可以从这里获取。在获取成功数据后会将获取到的数据放到genTreeNode方法中进行处理。

    genTreeNode = (parentId, isLeaf = false) => {
    const random = Math.random()
    .toString(36)
    .substring(2, 6);
    return {
    id: random,
    pId: parentId,
    value: random,
    title: isLeaf ? 'Tree Node' : 'Expand to load',
    isLeaf,
      };
    };
  

  这个方法的意思是将异步加载获取到的数据进行处理，也就是添加几个参数方便组件生成新的节点。其中要注意的是正常使用的时候这个方法触发一次就可以了，样例中是触发了两次，通过传入true和false给isLeaf，样例生成了有子节点的父节点和没有子节点的节点。实际中一般不需要这样。