Question

我正在使用具有音频播放器的本地应用制作应用程序，此音频播放器将通过其控制器（播放，停止，跳过...）查看它我怎么需要这个音频播放器可以从多个组件控制。现在我使用redux来管理包含播放器状态的应用程序状态（isPlaying，currentTrack ...）。

所以我的问题是，对于其他组件对玩家执行操作的最佳方式或好方法是什么？

Answer 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传递的函数访问一个共同的函数。然后，由于该函数被调用，玩家将对某些状态变化作出反应。无论这是内部组件状态还是作为道具传递到组件中的redux存储，模式都是相同的。请记住，使用react + redux架构状态向下流动，事件向上流动

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

1 个答案: