反应原生。 React 组件的单个实例答案

【问题标题】：React Native. Single instance of React component反应原生。 React 组件的单个实例
【发布时间】：2019-08-30 13:22:28
【问题描述】：

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

假设我要准备一个视图，其中放置了两个双胞胎电影播放器。我准备了简单的组件：

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 native 中创建类似 Singleton 组件 的东西？我应该如何处理？

【问题讨论】：

标签： reactjs typescript react-native singleton

【解决方案1】：

嗯，您可以尝试让VideoPlayer 接受来自父级的状态变量以确定它是否“正在播放”吗？因此，当您按下任一视频播放器时，它会向父级触发回调，将状态更改为真/假，并将其同时传递回两个子级？

所以基本上你有这个：

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

而VideoPlayer 将不再有自己的状态，只有道具。

【讨论】：