将“命令”发送到React组件?

时间:2016-10-16 00:16:28

标签: reactjs

只是为了提供一些背景并希望让我的问题更清楚,我将提出一个有效的方案,并且有意义。

假设我们有一个AudioTrack组件,它可以呈现播放,停止和搜索控件。当用户寻求时,该信息将传递给我们:

<AudioTrack playingId={this.state.playingId} onSeek={this.handleSeek} />

playingId表示当前播放曲目的ID)

但是如果我们将搜索控制移到音频轨道之外,那么在父<TrackList>中存在搜索控制并且将控制当前正在播放的轨道。现在我需要将带有数据的“命令”发送到适当的轨道,例如:

<AudioTrack playingId={this.state.playingId} seekTo={this.state.newPos} onSeek={this.seekComplete} />

这对我来说很麻烦,但基本上当用户放开搜索栏时,它会在newPos中设置TrackList状态,这会触发AudioTrack的{​​{1} }}。它寻求新的职位,然后可以通过componentWillReceivePropsonSeek报告this.setState({ newPos: null })

我是否正确地思考这个问题,还是有更好的方法?在理想的世界中,我可以直接调用TrackList的方法。

1 个答案:

答案 0 :(得分:-4)

你必须使用redux或flux来做这些事情。使用react时,应将每个组件存储在redux / flux存储中。实际上,您不应该使用构造函数(props),并将所有内容存储在商店中。这将解决你的'hacky&#39;问题。您可以直接致电您的redux商店,这正是您所寻找的。

我无法更多地关注redux的重要性和反应。你必须一起使用它们。

https://github.com/reactjs/redux