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;

实现这一目标的“反应方式”是什么？

我知道在做出反应时，数据会向下流。因此，如果我做对了，应该：

父组件中有一个playVideoHandler()，并将其传递给子组件：<VideoPlayer playVideo={this.playVideoHandler}/>。
在VideoPlayer组件中，将引用传递给<video> 元素，添加到props.sourceVideo函数中。这将使我回到处理逻辑的父组件中。

我的问题是：

如果最终拥有组件，那么拥有组件的意义何在？将所有内容传递回父组件。.
我什至认为整个事情对吗？我应该把它们分开吗分成两个部分，如果最后它们要同时播放时间？

反应，从一个父组件控制几个2组件

我的问题是：

0 个答案: