在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.

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

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

我知道有一些可能的方法可以解决此问题 (例如，流星会话，通过每个组件传递数据，基于通量的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 docs建议使用事件/订阅系统(通量是一种可能的解决方案，但通量远不止此...)

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是有效的模式，可以满足比我更大的需求，我已经有流星进行过这种工作. 我唯一需要的是访问另一个组件内部的组件状态.

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一个机会，它似乎可以完成工作(它确实很棒并且得到了很好的支持)，因此，如果您在相同的情况下，请检查

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.

无论如何，就项目的增长而言，您将在组件之间开始有很多动作/反应.在您添加的每个新组件中，要跟踪所有组件之间的所有这些关系会变得更加复杂.在这里将应用程序的 global 状态存储在一个位置很方便，这是

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屋！