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，樣例生成了有子節點的父節點和沒有子節點的節點。實際中一般不需要這樣。