时间戳

首页 > 解决方案 > 在没有子父关系的 React 组件之间传递数据？

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

问题描述

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

在formA.tsx中，我有第一个组件，它呈现视图并将用户插入的值存储在其状态中，一旦按下提交按钮，submitForm()就会调用：

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

在formB.tsx我有一个不同的渲染视图，但我希望在此处显示 FormA 的状态：

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

我在网上看到的所有信息都是针对父子组件的，这些信息是通过 props 传递的，但这里的组件在技术上都是父子组件，因为它们彼此不交互。如何进行此数据传输？通过中间组件（这是否有效）？

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

标签： javascriptreactjstypescript

解决方案

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

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

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

PS 您可以使用第三方库（Redux 是最流行的）来代替在所有组件之间共享“全局状态”。但是，请注意（与任何使用全局状态的情况一样）存在权衡取舍。

Redux 是一个很棒的库（它的创建者 Dan Abramov 现在在 React 上工作；事实上，他在几天前回答了我的一张票）。但与此同时，最近对 React 的更改（他帮助进行了；即新的 Context 东西）使 Redux 的价值大大降低。

该库绝对仍然具有价值，但我只是建议您在添加像 Redux 这样的额外复杂性之前确保您了解“纯 React”提供的内容。

推荐阅读