React Kendo Treeview 滚动到项目

Question

我正在使用 React Kendo Treeview UI。我想尝试滚动到树中 selected 的项目。我找到了很多 Javascript 和 JQuery 的例子，但 none 的 React 版本。我无法解决这个问题。

树中的项目类型为 MyViewTreeModel。我有一个 selectOntree 方法可以找到一个节点并将 selected 设置为 true。我的问题是我想滚动到该项目。

export interface MyViewTreeModel {
    text: string,
    expanded: boolean,
    employeeId : number,
    treeId: number,
    items?: MyViewTreeModel [],
    selected: boolean
}

.....

<TreeView 
            data={myData}
            expandIcons={true}
            onExpandChange={onExpandChange}
            onItemClick={OnItemClick}
            aria-multiselectable={false}
            aria-label={'text'}                
   ></TreeView>

.....

const selectOnTree = (employeeId: number ) => {            
            let treeItem = recursivelyFindEmployeeInTree(myData[0], employeeId);
            treeItem.selected = true;
            forceUpdate();                         
        }
    }

myData 是 MyViewTreeModel 类型。我尝试过的一种解决方案：我将 ref?: any 添加到我的模型并在 selectOnTree 函数中尝试了 treeItem.ref.current.focus();，但 ref 是 undefined.

我尝试的另一个解决方案是将此属性添加到 TreeView：

ref={component => treeViewRef.current = component}

然后只对 select TreeView 中的第一个 'li' 标签进行了尝试：

            if(!_.isNil(treeViewRef.current)            ){
                let domElement = ReactDOM.findDOMNode(treeViewRef.current);
                let treeItemDom = domElement.firstChild.firstChild;
                (treeItemDom as HTMLElement).focus();
            }

这没用，它没有把焦点放在那个点。

我在想也许我应该定义一个自定义的 itemRender，它有一个 ref，我可以找到它的 offsetTop，但是有多个项目，我如何为每个项目创建一个不同的 ref一？或者可能是一个自定义 ItemRender 呈现输入（使用 css 我可以让它看起来像一个跨度），然后如果 selected 为真，则将 autofocus 设置为 true。不确定 autofocus true 是否会滚动到该项目。

Answer 1

这是我能找到的解决方案：

添加对 TreeView 的引用

let treeViewRef = useRef(null);

在 return 语句中：

    <TreeView 
            data={myData}
            expandIcons={true}
            onExpandChange={onExpandChange}
            onItemClick={OnItemClick}
            aria-multiselectable={false}
            aria-label={'text'} 
            ref={component => treeViewRef.current = component}></TreeView>

2.Defined 此函数用于滚动到特定的 treeItem： 'k-in' 是代表 Kendo Treeview UI 组件中每个项目的每个范围的类名。

    const scrollToTreeViewItem = (treeItem: MyViewTreeModel ) => {
        if(!_.isNil(treeViewRef.current)){
            let domElement = ReactDOM.findDOMNode(treeViewRef.current);
            let treeItemDoms = (domElement as Element).querySelectorAll('.k-in');
            let domArray = [];
            treeItemDoms.forEach((node) => {
                domArray.push(node as HTMLElement);
            });
            let targetedDomElement = domArray.find((item) => {
                return item.innerText === treeItem.text;
            });
            targetedDomElement.scrollIntoView();
        }
    }

React Kendo Treeview 滚动到项目

React Kendo Treeview scroll to item

treeview

kendo-ui

typescript

reactjs