本地人的反应。反应元件的单实例

Question

我有严重的问题，但我不知道如何解决它。

让我们说，我必须准备一个视图，在那里放置两个孪生电影播放器。我编写了简单的组件：

interface Props {
    episode: Episode;
}
interface State {
    paused: boolean;
}
export class VideoPlayer extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      paused: true,
    };
  }

  render() {
    return (
      <TouchableWithoutFeedback
        onPress={() => {
          this.setState({paused: !this.state.paused});
        }}
      >
        <Video
          source={{ uri: episode.videoUrl }}
          paused={paused} />
      </TouchableWithoutFeedback>)
  }
}

好的，在我的ScreenComponent中的呈现函数中，我尝试添加两个孪生VideoPlayer组件，但是引用相同，如下所示：

render() {
  const videoPlayer = (<VideoPlayer episode={this.props.firstEpisode} />)
  <View>
   {videoPlayer}
   {videoPlayer}
  </View>
}

这是工作。在我的屏幕上，我可以看到两个视频播放器播放同一集，但我有问题！我想让他们在点击其中一个的时候同时演奏。现在，尽管指向相同的引用，它们都是分开操作的。

是否有任何方法在react本机中创建类似于单例组件的东西？我该怎么处理这个？

Answer 1

嗯，你能试着让VideoPlayer接受父变量的状态变量来确定它是否在“玩”吗？因此，当您按下任一视频播放器时，它会向父服务器发出回调，将状态更改为true/false，并同时将其传递回两个子节点？

从本质上说，你有这样一个：

render() {
  const videoPlayer = (<VideoPlayer episode={this.props.firstEpisode} isPlaying={this.state.isVideoPlaying} />)
  <View>
   {videoPlayer}
   {videoPlayer}
  </View>
}

VideoPlayer将不再有自己的状态，仅仅是道具。