在 React 组件之间共享数据 [英] Sharing data between components in React

问题描述

我正在开发一个使用 Meteor 和 React 作为视图引擎的应用

I'm developing an app using Meteor and React as view engine

考虑这个图表:

另一个例子中的反应隐藏组件

我需要在触发 C4 按钮单击事件时更改 C2 组件状态.由于它们没有直接关系，我无法直接从 C4 访问 C2 状态.

I need to change C2 component state when C4 button click event is fired. Since they don't have a direct relationship i cannot access to C2 state directly from C4.

另一个示例是从组件提交表单并获取在另一个组件中声明的数据(输入字段的值).

Another example would be submit a form from a Component and get the data (value of input fields) declared in another Component.

我知道有一些可能的技巧可以解决这个问题(例如 Meteor Session，通过每个组件传递数据，基于通量的 Action/Dispatcher).

I know there are some possible hacks to solve this problem (e.g. Meteor Session, pass data through each component, flux-based Action/Dispatcher).

React 文档推荐使用事件/订阅系统(flux 是一个可能的解决方案，但flux 远不止于此...)组件间通信

React docs recommends to use event/subscribe system (flux is a possible solution, but flux is much more that this...) Communicate Between Components

Redux 是另一种可能性(我有点担心，对于大型应用程序，如果我有很多动作，则组合减速器功能会爆炸，并且还担心缺少特定于动作的订阅系统 -据我所知，当调度一个动作时，所有的监听器都会被执行——我是 redux 的新手，也许我错了)

Redux is another possibility (i'm a bit worried about the fact that for large applications if i have a lot of actions, the combined-reducers-function will explode and also about the absence of an action-specific subscribe system - as far as i know all the listener will be executed when dispatch an action - i'm new in redux maybe i'm wrong)

Flux 或 Redux 是有效的模式，满足比我更大的需求，我已经有了 Meteor 来完成这种工作.我唯一的需要是访问另一个内部的组件状态...

Flux or Redux are valid pattern and satisfy a need bigger than mine, i have already Meteor for that kind of work. My only need is to access the component state inside another...

对于具有大量组件视图的中/大型应用程序，我需要一个可扩展的解决方案

I need a scalable solution for medium/large applications with a high number of component views

解决该问题的正确"方法是什么?

What's the "right" way to solve that problem?

更新:

最近我给了 redux 一个机会，它似乎完成了这项工作(它真的很棒并且得到了很好的支持)，所以如果你处于相同的情况，请检查 React + Redux:提交多组件表单

recently I gave redux a chance and it seems to do the work (it is really awesome and well supported), so if you are in the same situations check React + Redux: submit multi-component form

推荐答案

您可以使用任何发布/订阅事件库，然后让您的组件侦听您需要的任何事件.

You can use any publish/subscribe events library and then make your components listen to any event you need.

例如:

import React from 'react'
import 'events' from 'eventPublishSubscribeLibrary'

class Component2 extends React.Component {
  constructor (props) {
    super(props)
    this.toggleVisibility = this.toogleVisibility.bind(this)
    this.state = {
      visible = true
    }
  }
  componentDidMount () {
    events.subscribe('clicked-button', this.toogleVisibility)
  }
  toogleVisibility () {
    this.setState({
      visible: !this.state.visible
    })
  }
  render () {
    return visible && (
      <div>content</div>
    )
  }
}

const Component4 = () => (
  <button onClick={events.publish('clicked-button')}>Toggle Visibility</button>
)

您可以在 davidwalsh 的这篇博文中找到 Pub/Sub JavaScript 对象 的简单实现.或者，您可以在 npm 中搜索 以查找其他库.

You can find in this post by davidwalsh a simple implementation for a Pub/Sub JavaScript Object. Or you can search in npm for some other library.

这是我能想到的最简单的实现方式，对于小型项目来说，这是一个快速简单的解决方案，应该可以工作.

This is the most simple implementation I can think of and for small projects it is a quick an easy solution that should work.

无论如何，只要项目稍微增长一点，您的组件之间就会开始有很多动作/反应.对于您添加的每个新组件，跟踪所有组件之间的所有这些关系会变得更加复杂.这是将应用程序的全局 状态存储在一个地方非常方便的地方，这就是 redux 所基于的三个原则:单一事实来源.

Anyway, as far as the project will grow a bit you will start to have a lot of actions/reactions between your components. With every new component you'll add it'll get more complicated to track all of these relations between all your components. Here is where it comes handy to have the global state of your application stored in one single place, and that is one of the three principles that redux is based on: the single source of truth.

这篇关于在 React 组件之间共享数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！