在到达终点之前触发滚动功能？

Question

import React, { Component } from 'react';
import './App.css';

import Home from './Components/Home/Home';
import Explainers from './Components/Explainers/Explainers';
import VideoCreation from './Components/VideoCreation/VideoCreation';
import Video from './Components/Video/Video';
import Footer from './Components/Footer/Footer';


class App extends Component {
  constructor(props){
    super(props);
    this.state = {isExplainers:false, isVideoExp:false }
    this.handleScroll = this.handleScroll.bind(this);
  }
   componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }
   componentWillUnMount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll=()=>{
    console.log("scroll handle")
    this.setState({isExplainers:true});
    window.addEventListener('scroll', this.videoScroll);
  }
  videoScroll = () =>{
    console.log("scroll of Video");
    this.setState({isVideoExp:true});
    window.addEventListener('scroll', this.ourVideoScroll);
  }
  ourVideoScroll=()=>{
    console.log("our Video Scroll");
  }
  render() {
    const explainersClass = this.state.isExplainers ? "explainerAfter" : "explainer";
     const creationClass = this.state.isVideoExp ? "videoCreationAfter" : "videoCreation";
     const ourVideoClass = this.state.isExplainers ? "videoCreationAfter" : "videoCreation";
    return (

      <div className="App">
      <Home  onScroll = {this.handleScroll}/>
      <div className={explainersClass} onScroll={this.videoScroll}><Explainers /></div>
      <div className={creationClass} onScroll={this.ourVideoScroll}><VideoCreation /></div>
      <div className={ ourVideoClass } > <Video /></div>
      <Footer /> 
      </div>
    );
  }
}

export default App;

在这我有三个 onScroll 功能，我需要一个接一个工作的功能，一旦它到达组件的末尾就应该更新所有我的代码中的任何错误都会立即更新？或使用其他框架或其他任何其他形式或方法来做到这一点？

Answer 1

你不需要为每个函数添加滚动事件，你可以从前一个函数中调用它。此外，由于 setState 是异步的，您可以从 setState 回调中调用这些函数，该回调在 setState 完成后执行

class App extends Component {
  constructor(props){
    super(props);
    this.state = {isExplainers:false, isVideoExp:false }
    this.handleScroll = this.handleScroll.bind(this);
  }
   componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }
   componentWillUnMount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll=(e)=>{
    console.log("scroll handle");
    const explainer = React.findDOMNode(this.explainer);
    const home = React.findDOMNode(this.home);
    if(home.scrollTop === explainer.offsetTop) { 
       this.setState({ isExplainers : true });
    }
  }
  videoScroll = () => {
    const explainer = React.findDOMNode(this.explainer);
    const video = React.findDOMNode(this.video);
    if(explainer.scrollTop === video.offsetTop) { 
       this.setState({ isVideoExp : true });
    }
  }
  ourVideoScroll=()=>{
    console.log("our Video Scroll");
    const ourVideo = React.findDOMNode(this.ourVideo);
    const video = React.findDOMNode(this.video);
    if(video.scrollTop === ourVideo.offsetTop) { 
       // take action here
    }
  }
  render() {
    const explainersClass = this.state.isExplainers ? "explainerAfter" : "explainer";
     const creationClass = this.state.isVideoExp ? "videoCreationAfter" : "videoCreation";
     const ourVideoClass = this.state.isExplainers ? "videoCreationAfter" : "videoCreation";
    return (

      <div className="App">
      <Home  ref={ref => this.home = ref} onScroll = {this.handleScroll}/>
      <div className={explainersClass} ref={ref => this.explainer = ref} onScroll={this.videoScroll}><Explainers /></div>
      <div className={creationClass} ref={ref => this.video = ref} onScroll={this.ourVideoScroll}><VideoCreation /></div>
      <div className={ ourVideoClass } ref={ref => this.ourVideo = ref}> <Video /></div>
      <Footer /> 
      </div>
    );
  }
}

export default App;