如何移除反应中的异步组件？

Question

我有一个通过导入加载异步的组件，它处理父组件中的单击事件。父组件侦听对dom元素的单击，并启动其this.handleMovieClick(event, 'movie name')处理程序。

父组件将一个closeVideo支柱传递给加载的异步子组件。在子组件中，它侦听单击以关闭自身或视频播放结束时。它调用它的this.handleVideoEnd()，然后调用this.props.closeVideo。

this.props.closeVideo进入父组件并调用父组件的this.handleCloseVideo()。

我的问题是，当异步加载组件不再需要时，如何删除它？现在它正坐在DOM里。是否有一种强制移除组件的方法？是否有一种使用asyc调用componentWillUnmount的方法？

还是加载组件异步对于按需加载所需的代码只是有用的呢？它不是用来从父级移除组件的吗？但是反应路由器是怎么做到的呢？

父组件：

ParentComponent扩展组件{

constructor(props) {
 // bind event handlers

//用于保存子异步加载组件this.state ={ AnimatedFullScreenMovie: null，animatedFullScreenMoviePath: null }的引用；

  }


handleCloseVideo() {
    this.setState({
      AnimatedFullScreenMovie: null,
      animatedFullScreenMoviePath: null
    })
  }

}

// handles loading the component async, sets the path to movie based on what clicked
handleViewMovieClick(event, name) {
    event.preventDefault();
    if (this.state.AnimatedFullScreenMovie === null) {
      import('./../../../reusable/AnimatedFullScreenMovie').then(component => 
     {
       if (name === 'movie1') {
          this.setState({
              AnimatedFullScreenMovie: component,
              animatedFullScreenMoviePath: "movie1.mp4"
            });
       } else {
          this.setState({
              AnimatedFullScreenMovie: component,
              animatedFullScreenMoviePath: "movie2.mp4"
            });
       }
     }
  }

在父组件的render()中：

  render() {
// if the this.state.AnimatedFullScreenMovie has a component, render it
const showProfileVideo = () => {
      if (typeof this.state.AnimatedFullScreenMovie !== undefined && this.state.AnimatedFullScreenMovie !== null) {
        const AnimatedFullScreenMovie = this.state.AnimatedFullScreenMovie.default;
        return (<AnimatedFullScreenMovie
          videoSrc={this.state.animatedFullScreenMoviePath}
          closeVideo={this.handleCloseVideo} // <-- pass the handleCloseVideo() as a prop to the async loaded child
        />);
      } else {
        return null;
      }
    }

return(
   <section className="video-slider">
    { showProfileVideo() }
<div>
  <p><a href="#" onClick={() => this.handleViewMovieClick(event, 'movie1')}>Watch the film</a></p>
</div>

<div>    
  <p><a href="#" onClick={() => this.handleViewMovieClick(event, 'movie2')}>Watch the film</a></p>
 </div>

     ); 

}

下面是子异步组件：

export default class AnimatedFullScreenMovie extends Component {

  constructor(props) {
    super(props);

    this.videoContainer, this.video;
    this.playVideo = this.playVideo.bind(this);
    this.handleVideoEnd = this.handleVideoEnd.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

  componentDidMount() {
    this.video.addEventListener('ended', this.handleVideoEnd);
  }

  playVideo() {
    this.video.play();
  }

  handleVideoEnd() {
    this.video.pause();
    this.props.closeVideo; // <- launch the event handler in the parent to close the video by setting this.state.AnimatedFullScreenMovie to null
  }

  handleClose() {
    this.handleVideoEnd()
  }

  componentWillUnmount() {
    this.video.removeEventListener('ended', this.handleVideoEnd);
  }

  render() {
    return (
      <div id="animated-fullscreen-video-wrapper" ref={videoContainer => this.videoContainer = videoContainer}>
        <h2 onClick={this.handleClose}>Close</h2>
        <video src={this.props.videoSrc} ref={video => this.video = video} />
      </div>
    );
  }

}

Answer 1

我没有用this.props.closeVideo正确地调用该函数。正确的方法是异步子组件中的this.props.closeVideo()：

export default class AnimatedFullScreenMovie extends Component {

  // previous code

  handleVideoEnd() {
    this.video.pause();
    this.props.closeVideo(); // <- need to have the '()' chars in order to call
  }

 // remainder code


}