Javascript ReactJS获取对子元素的引用并设置其scrollTop位置

考虑以下组件：

render () {
   return (
            <div className='ux-table' onScroll={this.handleScroll}>
              <table ref='mainTable>
                 <Header>
                 **Rows data here***
              </table>
            </div>
          );

render () {
    return ( 
             <thead ref='tableHeader'>
                 <tr> ** column data here **  </tr>
             </thead>
           );
} 

我需要在主组件句柄上获取主组件（

mainTable

）的

scrollTop

位置，并将其设置为子标题组件（

tableHeader

），如下Javascript代码所示：

document.querySelector('.ux-table').onscroll = function (e) {
  // called when the window is scrolled.
  var topOfDiv = Math.max(document.querySelector(".ux-table").scrollTop - 2, 0);
  document.getElementsByTagName('thead')[0].style = "top:" + topOfDiv + "px;";
}

我的试用版主要组件：

handleScroll = (event) => {
      var topOfDiv = Math.max(this.refs.mainTable.scrollTop - 2, 0);
      this.refs.tableHeader.scrollTop = topOfDiv;
  }

在第一行中，对于

this.refs.mainTable.scrollTop

，我得到了零（0）。在第二行，我得到了一个错误，因为我无法直接访问子组件

简言之，如何：

a） 使用

ref

b） 从其父组件访问子组件

ref

---

谢谢你的帮助。

我不确定这是否有帮助，但我基于

它会显示在标记中写入的帮助页面，并根据上下文滚动到标题

渲染组件后，我根据标记标头搜索标头：

import React，{Component}来自'React'；
从“反应降价”导入降价；
导出默认类帮助扩展组件{
建造师（道具）{
超级（道具）；
此.state={
md:null
}
this.helpref=React.createRef（）；
this.fetchdata（）
}
fetchdata（）{
获取（“Help Page.md”）
.然后（（r）=>r.text（））
。然后（文本=>{
这是我的国家({
md:文本
});
})
}
componentDidUpdate（）{
//在这里，我搜索标题，如：##我的标题
让part=this.props.helpHeader.match（/（#+）\s（.*）/）
//如果我找到了，我会在孩子身上寻找它
如果（部分）
for（让childnod访问此.helpref.current.childNodes）
{
//如果找到孩子
if（childnod.nodeName==“H”+部分[1]。长度和childnod.innerText==部分[2]）
{
//我滚动到元素
this.helpref.current.scrollTop=childnod.offsetTop
}
}
}
render（）{
返回(
);
}
}

为什么不在父组件上设置状态，然后将该状态作为道具传递给子组件？这似乎是大多数容器/子关系的正常数据流滚动是一个正在执行的操作。我尝试过设置状态，但在浏览器中效果不好，用户可以注意到非自然效果。这就是为什么我要移动到

ref

usage…，你可以取消滚动以产生更少的状态更新。