如何在滚动加载其他组件时反应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)
}

请记住，您可能想要监听特定元素上的滚动事件，而不是整个 window。这将取决于您对 how/when 这些其他组件应加载的要求。

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

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

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

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

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

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

How to React js event on scroll load other components

javascript

lazy-loading

infinite-scroll

reactjs