React Contextprovider强制更新视频元素以播放视频

const VideoContext = React.createContext();

class VideoProvider extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      videoElement: null,
    };
  }

  updateVideoElement = (element) => {
    this.setState({ videoElement: element });
  };

  render() {
    return (
      <VideoContext.Provider
        value={{
          videoElement: this.state.videoElement,
          updateVideoElement: this.updateVideoElement,
        }}
      >
        {this.props.children}
      </VideoContext.Provider>
    );
  }
}

<VideoProvider>
  {/* 其他组件 */}
</VideoProvider>

class VideoPlayer extends React.Component {
  static contextType = VideoContext;

  componentDidUpdate() {
    const { videoElement, updateVideoElement } = this.context;
    // 强制更新视频元素
    updateVideoElement(videoElement);
  }

  render() {
    return (
      <VideoContext.Consumer>
        {(context) => (
          <video ref={context.updateVideoElement}>
            {/* 视频源 */}
          </video>
        )}
      </VideoContext.Consumer>
    );
  }
}