如何使用 React 和 antd Tree 以编程方式加载和打开树节点？

Question

我的树是用 React 做的，我用的是异步加载数据的 Ant Design Tree。
我在树的顶部有一个搜索输入，当用户搜索某些内容时，我想加载并打开搜索的第一个结果，然后查询数据库并找到节点的路径。我在antd中没有找到原生函数。

这是我的树（和https://ant.design/components/tree/一样）

<Tree
   loadData={this.onLoadData}
   showLine
   onExpand={this.onExpand}
   expandedKeys={expandedKeys}
>
    {this.renderTreeNodes(this.state.treeData)}
</Tree>

还有我的renderTreeNode函数

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

我怎样才能做到这一点？

Answer 1

我做了一个点击打开根目录的按钮。这就是函数。

var { treeData } = this.state;
var _this = this;

return new Promise((resolve) => {
    _this.setState({
        loading: true
    });
    query
         then((response) => {
               // I set the children of the first item, which is the root
               treeData[0].children = response.map((item)=>{
                   return { ...item, key: item.key };
                });
                // I set the expanded  keys of the tree
                _this.setState({
                    treeData: treeData,
                    loading:false,
                    expandedKeys: ["root"]
                });
                resolve();
           })
           .catch((err) => {
                console.warn('ERR TreeQuery:', err);
           });
  });

Answer 2

I want to load and open the first result of the search after that I queried the database and I find the paths of the nodes

以可控的方式使用树。将 expandedKeys 属性传递给它并在父组件中跟踪它的状态。

function Parent() {
  const [expandedKeys, setExpandedKeys] = React.useState([])
  return <Tree expandedKeys={expandedKeys} onExpand={setExpandedKeys} />

或者，您可以等待树的渲染，除非您有初始数据，然后将 defaultExpandedKeys 传递给它。

见https://ant.design/components/tree/#Why-defaultExpandedAll-not-working-on-ajax-data

如何使用 React 和 antd Tree 以编程方式加载和打开树节点？

How to load and open programmatically tree nodes using React and antd Tree?

reactjs

antd