Получить смещение / высоту дочернего компонента в React

Question

У меня есть следующая структура, дочерний компонент имеет набор компонентов GrandChild - сгенерированных рекурсивно - поэтому на странице может быть n компонентов внука - мне нужно знать, когда страница прокручивается, если элемент Grandchild прокручивается по высоте в Parentкомпонент для добавления некоторых стилей CSS на другой компонент Child2.Не уверен, как это сделать?это должно быть вычисление высоты?пожалуйста, помогите.

 Parent component:

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

      componentDidMount() {

     }

    render() {

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

}

Child1:

class Child1 extends Component {

      componentDidMount() {

      }

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

GrandChild:

class GrandChild extends Component {

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

Answer 1

На самом деле, если корневой div и элемент имеют свойство scroll, они поддерживают собственную полосу прокрутки. Вы можете использовать метод ниже, чтобы добавить слушателя в событие прокрутки.

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')
        })
    })
}