Как мне сказать, чтобы дочерний элемент в React искал его элемент видео? - PullRequest
Новая
       55

Как мне сказать, чтобы дочерний элемент в React искал его элемент видео?

0 голосов
/ 01 марта 2019

У меня есть простое приложение React с видеоплеером и диаграммой, отображающей данные о видео.Оба находятся в своих собственных компонентах на верхнем уровне: 

class App extends Component {
  ...
  render() {
    return (
      <div className="App">
        <VideoDisplay .../>
        <MetricsDisplay .../>
      </div>
    )
  }
}

Внутри VideoDisplay.js есть элемент <video>, которым я хочу управлять, в частности, путем поиска его игровой позиции, что я могу сделать, используя videoElement.currentTime=seekToTime.Я хочу управлять этим с помощью элемента MetricsDisplay: если я нажимаю на график, я хочу, чтобы видео искало то время, на которое нажали.Но для этого, похоже, мне нужно вызвать функцию в VideoDisplay.js из App.js, когда она получает щелчок от MetricsDisplay.js.Но это обязательно, а не декларативно, и у меня действительно возникают проблемы с реализацией этого в React.Это вообще возможно?Как еще я могу указать видео в элементе для поиска, вызванное щелчком по элементу родного элемента?

У меня есть обходной путь, который я опубликую в качестве ответа, но я очень уверен, что он довольно слабыйоптимальный с точки зрения дизайна, и вызовет головные боли обслуживания кода.Так какой метод лучше?Что такое «Реагировать», чтобы сделать что-то подобное?

См. Прикрепленный скриншот: при нажатии на график справа видео должно стремиться к нажатому моменту времени.

Video and metrics screenshot

1 Ответ

0 голосов
/ 01 марта 2019

Таким образом, чтобы обойти это, я могу провести время поиска в подпорках, и чтобы предотвратить его повторный поиск, я могу увеличить счетчик seekId.Это выглядит очень задом наперед, потому что я воссоздаю императивную логику, используя очень декларативную логику, предназначенную для того, чтобы этого избежать, и потому что я указываю, что элемент видео имеет постоянное «свойство» позиции, которую я хочу, чтобы видео искалои идентификатор команды для этого.

То есть я отвечаю на щелчок элемента MetricsDisplay с помощью этой функции в App.js: 

class App extends Component {
  ...
  setPlayheadTime(time) {
    this.setState((state, props) => ({seekTo: time, seekId: state.seekId + 1}));
  }
  ...
}

Iпередать seekTo и seekId VideoDisplay и обработать его в функции жизненного цикла в MetricsDisplay.js: 

class VideoDisplay extends Component {
  ...
  componentWillUpdate() {
    if (this.props.seekTo && this.props.seekId !== this.seekId) { this.seekTo(this.props.seekTo); }
  }

  seekTo(time) {
    console.log(`(${this.props.seekId}) Seek to ${time}`);
    this.seekId = this.props.seekId;
    document.getElementById("the-video").currentTime = time;
  }
  ...
}

Это работает, но я должен верить, что это не лучший способ для достижениячто в «нормальном» javascript является простой функцией обратного вызова.Какие-либо предложения?Чего мне не хватает?

...