antd的异步加载树组件使用-蒲公英云

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，样例生成了有子节点的父节点和没有子节点的节点。实际中一般不需要这样。