动态加载树

Demo.jsx

@connect()
class Center extends PureComponent {
  state = {
    treeData: [
      { title: 'Expand to load', key: '0' },
      { title: 'Expand to load', key: '1' },
      { title: 'Tree Node', key: '2', isLeaf: true },
    ],
  };

  onLoadData = treeNode => {
    const { dispatch } = this.props
    return new Promise(resolve => {
      if (treeNode.props.children) {
        resolve();
        return;
      }
      dispatch({
        type: 'global/test', payload: { treeNode }, callback: (result) => {
          console.log(result)
          this.setState({ treeData: [...this.state.treeData] })
          resolve()
        }
      })
    })
  };

  renderTreeNodes = data =>
    data.map(item => {
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key} dataRef={item}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode {...item} dataRef={item} />;
    });

  render() {


    return (
      <div>
        <Tree loadData={this.onLoadData}>{this.renderTreeNodes(this.state.treeData)}</Tree>
      </div>
    );
  }
}

export default Center;

model.js

  effects: {

    *test({ payload, callback }, { call, put, select }) {
      yield call(delay, 1000)
      payload.treeNode.props.dataRef.children = [
        { title: 'Child Node', key: Math.random() },
        { title: 'Child Node', key: Math.random() },
      ];
      callback('test执行完成')
    },
}