Javascript 如何在滚动加载其他组件时响应js事件

我在一个页面中有更多的组件。同时加载所有页面。 但我想在滚动事件加载下一个组件之后

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

render（）{
返回(
);
}

你知道吗？这是可能的反应

---

谢谢大家!

您需要收听一个滚动事件——类似以下内容：

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

请记住，您可能希望侦听特定元素上的滚动事件，而不是整个窗口。这将取决于您对如何/何时加载这些其他组件的要求

在处理该事件时，以某种方式跟踪滚动距离

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

注意：在每个滚动事件上更新您的状态可能已经过时了。我认为最好的方法是检测用户何时滚动到底部，然后有条件地加载/呈现新组件

然后，在渲染函数中，根据滚动距离的值有条件地渲染其他组件。同样，根据您的具体需求，您可能需要在此处包含更复杂的逻辑，但下面是一个基于滚动距离的基本示例：

render() {
    let 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>       
     );
}

render（）{
让additionalComponents=null；
如果（this.state.scrollY>1000）{//任意数量
附加组件=(
);
}
返回(
{附加组件}
);
}

我不太确定如何实现这一点，但我知道有一个npm包可以实现这一点：感谢您的回答。但是。。。您应该将let additionalComponents=null；而不是常量additionalComponents=null；