React.js + Flux - 将回调作为视图中的prop传递

时间:2015-08-11 19:09:02

标签: javascript design-patterns reactjs flux

官方React.js tutorial有一个有趣的做法,即将回调作为道具传递给子组件。在他们的示例中,他们有一个名为CommentBox的父组件和一个名为CommentForm的子组件。父(CommentBox)将回调方法handleCommentSubmit传递给子(CommentForm)。提交表单时,子组件将触发回调以通知父表单已提交表单。

但是,这个React教程是而不是 Flux architecture上的教程。从我有限的流量角度来看,我的第一直觉是子视图应该调用一个动作,该动作(通过全局调度系统)更新商店。然后,更新的商店将触发任何有意识的组件的更新,包括相关的父组件CommentBox

换句话说,父组件不关心,也不想知道它的孩子,CommentForm正在做什么,或者提交表单的时间。相反,它会在商店更新时重新呈现。这意味着触发商店更新的任何会导致更新CommentBox(在我看来这是一件好事;如果有多种方式提交评论会怎么样?)< / p>

这让我想到了我的主要问题:Flux架构中是否存在 适合将回调方法传递给子组件的情况,或者这通常是反图案?

注意:Flux + React.js - Callback in actions is good or bad?不是同一个问题 - 我在视图中询问回调,而不是在操作中。

1 个答案:

答案 0 :(得分:2)

如果你有一个纯粹的UI组件,就像一个花哨的按钮,在UI中启用回调是有意义的;动作只应用于触发应用程序更改:

<MyFancyButton onClick={this.handleClick}/>

显然,MyFancyButton没有足够的信息来知道点击应该做什么;它取决于父视图,它使用它来决定要分派的动作。