Question

我的树是用React制作的，我使用Ant设计树来异步加载数据我在树的顶部有一个搜索输入，当用户搜索某些东西时，我想加载并打开搜索的第一个结果，之后我查询了数据库并找到了节点的路径。我在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

<块引用>

我想加载并打开搜索的第一个结果，然后查询数据库并找到节点的路径

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

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以编程方式加载和打开树节点？

2 个答案: