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;

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

1 个答案: