使用 react-redux 时从另一个组件调用组件方法？答案

【问题标题】：Calling a component method from another component when using react-redux ?使用 react-redux 时从另一个组件调用组件方法？
【发布时间】：2017-04-21 20:19:27
【问题描述】：

我正在使用带有音频播放器的 react native 制作应用程序，这个音频播放器将通过它的控制器（播放、停止、跳过...）显示它我需要这个音频播放器吗？由多个组件控制。现在我正在使用 redux 来管理包含播放器状态的应用程序状态（isPlaying、currentTrack...）。

所以我的问题是，另一个组件对播放器执行操作的最佳或好方法是什么？

【问题讨论】：

标签： reactjs react-native redux react-redux

【解决方案1】：

控制行为的一种常见模式是通过 props 将行为（函数）向下传递给其他组件。

在您对媒体播放器进行共享控制的情况下，您可能会使用这种架构（伪代码）：

togglePlayer(){
   this.setState(state=>({playing: !state.playing}))
   //or
   dispatch(togglePlayerActionCreator())
}

<Player isPlaying={this.state.playing} />

<ThingThatControlsPlayer onSomeEvent={this.togglePlayer} />

<ThingThatControlsPlayer onSomeEvent={this.togglePlayer} />

在这种情况下，每个兄弟组件都可以通过作为 prop 传递的函数访问一个公共函数。然后，由于调用了该函数，玩家将对某些状态变化做出反应。无论是内部组件状态还是作为 props 传入组件的 redux store，pattern 都是一样的。请记住，在 react+redux 架构中状态向下流动，事件向上流动

【讨论】：