ant-design树搜索后，如何滚动定位到选中的树节点

前提：树节点比较多，屏幕展示不全。（不管节点是否为异步，定位要等到节点渲染处理才执行）
第一种方法：（简单方便）
只要子节点选中，都会默认展开父节点。 在设置完节点选中展开的回调里面设置定位。

this.setState({
      iframeUrl: selectTabPane.url,
      tabPaneActiveKey: selectTabPane.key,
      selectedKey: selectTabPane.key,
      expandedKeys: [selectTabPane.key],
      autoExpandParent: true,
      currentProjectId: selectTabPane.currentProjectId
    }, () => {
      document.getElementsByClassName('ant-tree-treenode-selected')[0].scrollIntoView()
    })
// 1.因treenode并不能真正的加id来获取dom，所以这里通过className读取
// 2.scrollIntoView()为原生的方法。Element 接口的 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。

第二种方法：这个不适用于tree，因为里面的定位需要用到ID。但是作为知识储备可以了解一下。
参考：一个hook搞定React项目中的平滑滚动
这个是用hook写的，我若用类组件class直接引用是不行的。将hook写的组件再次封装成函数组件，然后直接调用。
代码如下：

import React, { useState,  useRef,forwardRef, useImperativeHandle } from 'react';
import ReactDOM from 'react-dom';
import useSmoothScroll from 'react-smooth-scroll-hook'; 

// 封装的函数组件
const Container = forwardRef((
  props,
  ref, 
) => { 
  const itemref = useRef(null);
  const { scrollTo } = useSmoothScroll({
    ref:itemref,
    speed: 100,
    direction: 'y',
  }); 
  useImperativeHandle(ref, () => ({ 
    scrollTo
  }))
  
  return (
    <div ref={itemref}
    style={{
      overflowY: 'scroll',
      maxHeight: '200px',
    }}> 
      {props.children}
    </div>
  )
})
// 应用
class Parent extends React.Component{
  constructor(props) {
    super(props)
    this.containerRef = React.createRef()
  }
   test = () => { 
     this.containerRef.current.scrollTo('#item-20')
  }
  render() {
    return <div>
    <button onClick={this.test}>scrollTo('#item-20')</button>
      <Container ref={this.containerRef} >
      <>
          {/* <button onClick={this.test}>scrollTo('#item-20')</button> */}
          {/* {这里是个树不可以 treeNode 并没有真正的给每个node加ID。所以通过ID定位应该是不行的 */}
        <div  
        >
          {Array(100)
            .fill(null)
            .map((_item, i) => (
              <div key={i} id={`item-${i}`}>
                item-{i}
              </div>
            ))}
        </div>  
      </>
      </Container>
  </div>
  }
}