javascript - 在没有子父关系的 React 组件之间传递数据？

Question

我有两个 View 在我的应用程序中的单独“选项卡”中呈现:

在 formA.tsx 中，我有第一个组件，它呈现 View 并将用户插入的值存储在其状态中，一旦按下提交按钮，submitForm() 称为:

class FormA extends React.Component<any, any>{
    public constructor(props){
        super(props);
        this.state={name:''}
    }
    private submitForm(){
        //transfer data -> FormB
    }
    ...

在 formB.tsx 中，我有不同的渲染 View ，但我希望在此处显示 FormA 的状态:

class FormB extends React.Component<any, any>{
    ...
    render(){
        return(
        <p> //the FormA state here </p>
        )
    }

我在网上看到的所有信息都是针对父子组件的，这些信息是通过 props 传递的，但这里的组件在技术上都是父组件，因为它们不互相交互。我怎样才能进行此数据传输？通过中间组件(这有效吗)？

编辑:我通过使用 Javascript eventBus 解决了这个问题。

Answer 1

简而言之，无论您使用 props 还是上下文，信息在 React 应用程序中始终必须“向下流动”。这意味着如果两个组件需要共享状态，最终这两个组件的某个父组件需要创建该状态并将其提供给这两个组件。

这可能会让人感觉有局限性，但它实际上是 Facebook 在创建 React 时提出的“flux”范式的一部分。从本质上讲，其背后的想法是，如果您保持数据始终朝一个方向流动，则可以解决许多更大的问题。如果您好奇，Facebook 团队制作了一个很棒的视频，解释了这一更大的理念，以及它是如何从 Facebook Messenger 的开发中产生的:https://www.youtube.com/watch?v=nYkdrAPrdcw .

但抛开哲学不谈，作为一个实际问题，上下文 API(最近大大得到了改进)实现了关键的“自上而下”流程，同时仍然使您免于必须使用的痛苦>props 将其传递到中间的每个组件。我鼓励您考虑在父组件“提供”的上下文中设置共享状态，然后让您的两个组件“使用”该上下文。

附注您可以使用第三方库(Redux 是最受欢迎的)来在所有组件之间共享“全局状态”。但是，请注意(与任何使用全局状态的情况一样)需要权衡。

Redux 是一个很棒的库(它的创建者 Dan Abramov 现在在 React 上工作；事实上，他几天前回复了我的一张票)。但与此同时，最近对 React 的更改(他帮助做出的；即新的 Context 内容)使 Redux 的值(value)比以前低了很多。

该库绝对仍然有值(value)，但我建议您在添加 Redux 等额外复杂性之前先确保了解“纯 React”提供的内容。