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

Question

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

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