Реагируйте, управляйте несколькими двумя компонентами из одного родительского компонента

Question

У меня есть одно аудио и одно видео, которые я хочу воспроизвести одновременно из родительского компонента.

import React, { Component } from "react";

class VideoPlayer extends Component {
  state = {};

  render() {
    return (
      <video muted>
        <source src={this.props.sourceVideo} type="video/mp4" />
      </video>
    );
  }
}

class AudioPlayer extends Component {
  state = {};

  render() {
    return (
      <audio>
        <source src={this.props.sourceAudio} type="audio/mpeg" />
      </audio>
    );
  }
}

class Parent extends Component {
  state = {};

  playBoth() {
    // What else?
  }

  render() {
    return (
      <div>
        <VideoPlayer sourceVideo="video.mp4" />
        <AudioPlayer sourceAudio="soundtrack.mp3" />
        <button onClick={this.playBoth} />
      </div>
    );
  }
}

export default Parent;

Каков «способ реагирования» для достижения этого?

Iзнать, что в реакции данные стекают .Поэтому, если я правильно понял, я должен:

• Иметь playVideoHandler() в родительском компоненте и передать его дочернему компоненту: <VideoPlayer playVideo={this.playVideoHandler}/>.

• В компоненте VideoPlayer передайте ссылку на элемент <video> в функцию props.sourceVideo.Это вернет меня к моему родительскому компоненту, где я буду обрабатывать логику.

Мои вопросы:

• Какой смысл иметькомпоненты, если в конце концов вы в конечном итоге передаете все обратно родительскому компоненту ..?

• Я даже думаю, что все это правильно?Должен ли я даже разделить их на 2 компонента, если в конце они будут воспроизводиться одновременно?