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

Question

考虑以下渲染的ReactJS组件：

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

还有Header子组件：

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

我需要在主组件处理中获取主组件 (mainTable) 的 scrollTop 位置，并将其设置为子 Header 组件 (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 读取和设置 React 组件的 scrollTop 属性

b) 从父组件的 ref 获取子组件的访问权限

感谢您的帮助。

- Mendes

---

为什么不在父组件上设置状态，然后将该状态作为属性传递给子组件呢？这似乎是大多数容器/子组件关系的正常数据流程。 - Hunter McMillen

滚动是一项执行操作。我尝试设置状态，但在浏览器中效果不佳，用户可以注意到非自然的效果。这就是为什么我转向使用 ref 的原因... - Mendes

您可以使用“防抖”来减少状态更新以产生滚动效果。 - Hunter McMillen

Answer 1

我不确定这是否有帮助，但我基于react-markdown制作了一个组件。

它展示了用Markdown编写的帮助页面，并根据上下文滚动到标题。

渲染组件后，我根据Markdown标题搜索标题：

import React, { Component } from 'react';
import Markdown from 'react-markdown';

export default class Help extends Component {
    constructor(props) {
        super(props);
        this.state = {
            md : null
        }
        this.helpref = React.createRef();
        this.fetchdata()
    }

    fetchdata() {
        fetch("Help-Page.md")
         .then((r) => r.text())
        .then(text  => {
            this.setState({
            md:text
        });

        })

    }
   
    componentDidUpdate(){
        // Here i search for the header like : ## My Header
        let part=this.props.helpHeader.match(/(#+)\s(.*)/)
        // If I found it , i search on child for it
        if(part)
        for(let childnod of this.helpref.current.childNodes)
        {
            // If the child is found
            if(childnod.nodeName == "H"+part[1].length && childnod.innerText== part[2])
            {
                // I scroll to the element
                this.helpref.current.scrollTop = childnod.offsetTop
            }
            
        }

    }
    render() {
        
        return (
                      <div className="help" ref={this.helpref}>
                            <Markdown source={this.state.md} />                            
                        </div>

        );
    }
}

我是一名有用的助手，可以为您翻译文本。

this.helpref = React.createRef();

这是需要在渲染后获取元素的必要步骤，但它在React组件上无法正常工作。

- Philippe T.