스크롤로드시 다른 구성 요소에 js 이벤트에 반응하는 방법

Question

한 페이지에 더 많은 구성 요소가 있습니다. 모든 페이지가 동시에로드되었습니다. 하지만 난 스크롤 이벤트 다음 componentas로드 후 싶어요.

HomePage.js :

render() { 
     return (
      <section className="section1"> 
        <Component1 /> 
      </section>   <section className="section2">     
        <Component2 />     
      </section> 
      <section className="section3"> 
       <Component3 /> 
      </section> 
      <section className="section4"> 
       <Component4 /> 
      </section> 
      <section className="section5"> 
       <Component5 /> 
      </section> 
      <footer> 
       <Footer /> 
      </footer>  
     ); 
    } 

은 어떤 생각이있으세요? 반응에서 가능합니다.

감사합니다.

Answer 1

당신은 스크롤 이벤트를 수신해야합니다 -이 같은 : 특정 요소에 스크롤 이벤트를 수신 할 수 있습니다

componentDidMount() { 
    window.addEventListener('scroll', this.handleScroll) 
} 

명심 아닌 전체 창을 . 이는 다른 구성 요소를로드하는 방법 /시기에 대한 요구 사항에 따라 달라집니다.

해당 이벤트를 처리 할 때 어떻게 든 스크롤 거리를 추적하십시오.

handleScroll = (event) => { 
    this.setState({ 
     scrollY: window.scrollY 
    }); 
} 

참고 : 모든 스크롤 이벤트에 상태를 업데이트하지만 죽일 이상 - 아마. 가장 좋은 방법은 사용자가 맨 아래로 스크롤 한 다음 조건부로 새 구성 요소를로드/렌더링 할 때를 감지하는 것입니다.

그런 다음 렌더링 기능에서 스크롤 거리의 값에 따라 추가 구성 요소를 조건부로 렌더링합니다. 다시 말하지만, 당신은 가능성이 사용자의 특정 요구에 따라 여기에 더 정교한 논리를 포함해야하지만 여기 스크롤 거리에 따라 기초적인 예입니다 것입니다 : 내가 그러나 내가 거기에 알고,이를 구현하는 방법을 너무 잘 모르겠어요

render() { 
    const additionalComponents = null; 

    if (this.state.scrollY > 1000) { //arbitrary amount 
     additionalComponents = (
      <Component6 /> 
     ); 
    } 

    return (
     <section className="section1"> 
       <Component1 /> 
     </section>   <section className="section2">     
       <Component2 />     
     </section> 
     <section className="section3"> 
      <Component3 /> 
     </section> 
     <section className="section4"> 
      <Component4 /> 
     </section> 
     <section className="section5"> 
      <Component5 /> 
     </section> 

     { additionalComponents } 

     <footer> 
      <Footer /> 
     </footer>  
    ); 
}