Как я могу вызвать event.target.playVideo (), используя npm 'response-youtube', когда родительское состояние изменяется без повторного рендеринга child? - PullRequest
Новая
       15

Как я могу вызвать event.target.playVideo (), используя npm 'response-youtube', когда родительское состояние изменяется без повторного рендеринга child?

0 голосов
/ 31 мая 2019

Я чувствую, что это простая проблема, вызванная отсутствием у меня опыта реагирования, простите, если я слишком усложнил.

Используя npm'act-youtube ', я пытаюсь вызватьevent.target.pauseVideo () в компоненте Video при каждом изменении определенного родительского состояния.У меня есть кнопка, которая переключает отображение div видеокомпонента на «none» или «block» при нажатии, я хочу, чтобы эта кнопка также приостанавливала или воспроизводила видео без необходимости повторного рендеринга компонента Video.Я могу вызвать event.target.pauseVideo () внутри предоставленного _onReady () {} или _onStateChange () {} без проблем, однако я хочу, чтобы он срабатывал при нажатии кнопки, а не на любом из этих триггеров.*

Я пытался создать свой собственный метод в компоненте Video, который вызывает event.target.pauseVideo (), однако я не знаю, как вызвать это у родителя (я думаю, что это выполнимо с помощью ссылок, но везде ячтение говорит, что ссылки не должны использоваться в 99% случаев.) Я также попытался передать event.target.pauseVideo () компоненту от родителя, но, похоже, он пытается использовать событие или цель от родителя, который невместо компонента Video не существует.

Parent: 

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 () в компоненте видео никогда не запускается, но я хотел бы, чтобы он запускался всякий раз, когдаНажата кнопка паузы.

Приведенный выше код воспроизводит видео без проблем, однако я ищу способ вызвать метод _pause () в компоненте Video без необходимости повторной визуализации компонента.

1 Ответ

0 голосов
/ 31 мая 2019

Создана песочница для кода с остановкой видео при нажатии кнопки паузы. Достигается с помощью React Hooks.

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

...