Question

我觉得这是一个简单的问题，是由于我缺乏反应的经验所致，如果过于复杂，请原谅我。

我使用npm'react-youtube'，试图在特定父状态发生变化时在Video组件上调用event.target.pauseVideo（）。我有一个按钮，可在单击时将视频组件的div显示切换为“无”或“阻止”，我希望该按钮也可以暂停或播放视频而不必重新渲染“视频”组件。我可以在提供的_onReady（）{}或_onStateChange（）{}内调用event.target.pauseVideo（），没有问题，但是我希望在我按下按钮而不是在这两个触发器上触发它。

我尝试在Video组件中创建自己的方法，该方法调用event.target.pauseVideo（），但是我不知道如何从父级触发此操作（我认为使用refs是可行的，但是我在阅读的所有地方表示不应在99％的时间内使用refs。）我也尝试过将event.target.pauseVideo（）从父级传递到组件，但这似乎是尝试使用来自父级的事件或目标，而不会不存在，而不是视频组件。

父母：

class Window extends React.Component {
  constructor(props){
    super(props)
    this.state={
      currentDisplay: 1,
      isPaused: 0,
    }
  }   

  renderVideo(isPaused){
    return <Video isPaused={isPaused}>;
  }

  render() {
    return (
      <div className='window'>

        <div className = 'vid'>
          {this.renderVideo(this.state.isPaused)}
        </div>

        <div className = 'PauseButton'>
          <Pause handleClick={() => {this.togglePause()}}/>
        </div>
      </div>
    );
  }   
}

togglePause（）只是将暂停状态从0更改为1，反之亦然

暂停按钮组件：

class PauseButton extends React.Component{
  render(){
    return(
      <button onClick={() =>  {this.props.handleClick()}  }>
        Pause
      </button>
    )
  }
}

视频组件：

class Video extends React.Component{
  _pause(event, isPaused){
    if(isPaused = 1){event.target.pauseVideo()}
  }

  _onReady(event) {
    //event.target.pauseVideo()
  }
  render(){ 
    const opts = {
      height: '390',
      width: '640',
      playerVars: { // https://developers.google.com/youtube/player_parameters
      autoplay: 1,
      }
    }       
    return(
      <YouTube
      videoId= {'21X5lGlDOfg'}
      opts={opts}
      onReady={this._onReady}
      onStateChange={this._onStateChange}
      />
    )
  }
}

当前，视频组件中的'_pause（）'方法从不触发，但是我希望只要单击暂停按钮就可以触发它。

上面的代码播放视频没有问题，但是我正在寻找一种方法来触发Video组件中的_pause（）方法，而不必重新渲染该组件。

Answer 1

创建了一个代码沙箱，当单击“暂停”按钮时，“视频”获取已暂停。使用React Hooks实现。

https://codesandbox.io/s/elegant-cerf-0os7t

当父状态发生更改而无需重新呈现子级时，如何使用npm'react-youtube'调用event.target.playVideo（）？

1 个答案: