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小时内删除。
发表评论