在 React 中获取子组件的偏移量/高度答案

【问题标题】：Get offset/height of a child component in React在 React 中获取子组件的偏移量/高度
【发布时间】：2019-05-08 23:24:47
【问题描述】：

我有以下结构，子组件有一组 GrandChild 组件 - 递归生成 - 所以页面可以有 n 个孙子组件 - 如果 Grandchild 元素在 Parent 上滚动到其高度，我需要知道页面何时滚动组件在其他组件 Child2 上添加一些 CSS 样式。不知道该怎么做？那应该是高度计算吗？请帮忙。

 Parent component:

  class Parent extends Component {
      constructor(props) {
        super(props);
        this.blocks = [];
      }

      componentDidMount() {

     }

    render() {

      return (
       <Child1 />
       <Child2 />
       );
    }

}

孩子1：

class Child1 extends Component {

      componentDidMount() {

      }

       render() {   
         return (
           <div>
            <GrandChild />
          </div>
         );
       }  
     }

孙子：

class GrandChild extends Component {

       render() {   
         return (
           <div>
            <p class="paragraph" />
          </div>
         );
       }  
     }

【问题讨论】：

标签： javascript reactjs jsx

【解决方案1】：

实际上，如果根div和元素都具有滚动属性，它们会维护自己的滚动条。您可以使用下面的方法为滚动事件添加监听器。

componentDidMount(){
    window.addEventListener('scroll',()=> {
        var header = this.refs.header
        var scrollTop = document.body.scrollTop ||            document.documentElement.scrollTop
        if(scrollTop>300){
            console.log(scrollTop)
        }
        var listener = document.getElementById("Child1")
        listener.addEventListener('scroll',() => {
            console.log('scroll')
        })
    })
}

【讨论】：