React.js + Flux -- 在视图中将回调作为道具传递

Posted 2023-02-22

【中文标题】React.js + Flux -- 在视图中将回调作为道具传递

【英文标题】：React.js + Flux -- Passing callback as a prop in view

【发布时间】：2015-11-04 03:57:59

【问题描述】：

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

然而，这个 React 教程不是Flux architecture 上的教程。从我有限的通量的角度来看，我的第一直觉是子视图应该调用一个动作，它（通过全局调度系统）更新一个商店。然后，更新后的存储将触发任何想要知道的组件的更新，包括有问题的父组件CommentBox。

换句话说，父组件不会关心，也不想知道它的子组件，CommentForm 正在做什么，或者何时提交表单。相反，它会在商店更新时重新呈现。这意味着触发商店更新的任何东西都会导致 CommentBox 被更新（在我看来这是一件好事；如果有多种提交评论的方式怎么办？）

这让我想到了我的主要问题：在 Flux 架构中是否存在适合将回调方法传递给子组件的情况，或者这通常是一种反模式？

---

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

【参考方案1】：

如果你有一个纯 UI 组件，比如一个花哨的按钮，那么在 UI 中启用回调是有意义的；动作只能用于触发应用程序更改：

<MyFancyButton onClick=this.handleClick/>

显然，MyFancyButton 没有足够的信息来知道点击应该做什么；由使用它的父视图决定调度哪些操作。

【讨论】：

在 react 教程中，CommentForm 会被认为是一个纯 UI 组件吗？即你如何限定“纯 UI”组件？

我想这取决于组件是否拥有/影响应用程序状态，或者它是否仅具有与其交互性相关的状态。像评论表这样的东西可以用任何一种方式；它要么是一个不知道提交给什么的通用评论表单，要么是一个与特定应用目的相关的评论表单。