Question

组件： https://ant.design/components/tree-select/ 没有使用loadData选项的示例。

async getChildren(node) {
    console.log(node);
    let r = $.get("/tree", {id: node.value})
    console.log(await r);  // request works
    return r;
}

使用此代码，我只看到树加载，什么也没有发生。这不是错误，但子节点未附加到树上。

如果我没有返回Promise，则会收到一个巨大的错误，并出现空白页。

Answer 1

这是loadData函数的示例：

 onLoadData = (treeNode) => {
    console.log('load data...');
    return new Promise((resolve) => {
      setTimeout(() => {
        const treeData = [...this.state.treeData];
        getNewTreeData(treeData, treeNode.props.eventKey, generateTreeNodes(treeNode), 2);
        this.setState({ treeData });
        resolve();
      }, 500);
    });
  }

您可以在here中找到更多深入的示例

更清晰地说：

TreeData是TreeNode的数组 source
antd树选择使用rc-tree，因为antd建立在rc-components之上，您可以看到source
对于延迟加载，您需要操作treeNode，如上面的代码片段所示这样做是：每次加载新数据时，它将是一个treeNode对象，并且将调用onLoadData（）回调，您在其中提供代码与该节点有关。（该示例只是附加到该州的treeData 变量]

如何使用ant design treeselect异步加载节点？

1 个答案: