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

有什么想法吗？在 react 中是可能的。

谢谢!

Answer 1

你需要监听一个滚动事件——像这样:

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