antd tree 实现scrollto方法
antd的Tree组件本身就支持基于节点key值的定位方法,使用方式为调用Tree组件的scrollTo方法,传入节点key即可。具体实现如下:
1. 在Tree组件中记录每个节点的key值,可以在渲染节点时将其添加在节点的data属性中。
2. 在Tree组件外使用ref获取到Tree组件实例,然后调用scrollTo方法,传入想要定位的节点的key值。
具体代码如下:
jsx
import React, { useRef, useEffect } from 'react';
import { Tree } from 'antd';
const { TreeNode } = Tree;
function MyTree(props) {
  const treeRef = useRef();
  useEffect(() => {react to的用法
    在Tree完成渲染后,实现scrollTo方法
    if (treeRef.current) {
      treeRef.current.scrollTo(props.scrollToKey);
    }
  }, [props.scrollToKey]);  监听props.scrollToKey的变化,变化时执行scrollTo方法
  return (
    <Tree ref={treeRef}>
      {
        props.data.map(node => (
          <TreeNode key={node.key} data={node}>
            {node.title}
          </TreeNode>
        ))
      }
    </Tree>
  );
}
export default MyTree;
使用时:
jsx
<MyTree data={treeData} scrollToKey={'node-3-2'} />

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。