ant-design/components/tree/demo/dynamic.md

异步数据加载

• order: 3

异步加载数据

---

import { Tree } from 'antd';
const TreeNode = Tree.TreeNode;

const asyncTree = [
  {name: "pNode 01", key: "0-0"},
];

const generateTreeNodes = () => {
  const arr  = [
       {name: "伯约", key: "0-0-0"},
  ];
  return arr;
}

const TreeDemo = React.createClass({
  timeout(duration = 0) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve.bind(this), duration);
    })
  },
  getInitialState() {
    return {
      treeData: []
    };
  },
  componentDidMount() {
    this.timeout(1000).then(() => {
      this.setState({
        treeData: asyncTree
      });
      return asyncTree;
    });
  },
  handleSelect(info) {
    console.log('selected', info);
  },
  handleDataLoaded(treeNode) {
    return this.timeout(1000).then(() => {
      const child = generateTreeNodes();
      const treeData = [...this.state.treeData];
      treeData.forEach((item) => {
        if (item.key === treeNode.props.eventKey) {
          item.children = child;
        }
      });
      this.setState({treeData});
      return child;
    });
  },
  render() {
    const loop = (data) => {
      return data.map((item) => {
        if (item.children) {
          return <TreeNode title={item.name} key={item.key}>{loop(item.children)}</TreeNode>;
        } else {
          return <TreeNode title={item.name} key={item.key}></TreeNode>;
        }
      })
    };
    const parseTreeNode = data => loop(data);
    let treeNodes = parseTreeNode(this.state.treeData);
    return (
        <Tree onSelect={this.handleSelect} onDataLoaded={this.handleDataLoaded} showLine={false}>
          {treeNodes}
        </Tree>
    )
  }
})

ReactDOM.render(<TreeDemo />, document.getElementById('components-tree-demo-dynamic'));