“正确”方式

Question

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

考虑这个图：

React hide component from another example

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

另一个例子是从Component提交表单并获取在另一个Component中声明的数据（输入字段的值）。

我知道有一些可能的黑客可以解决这个问题（例如，Meteor Session，通过每个组件传递数据，基于flux的Action / Dispatcher）。

React docs建议使用事件/订阅系统（通量是一种可能的解决方案，但是通量远远超过这个......）Communicate Between Components

Redux是另一种可能性（我有点担心这样一个事实：对于大型应用程序，如果我有很多动作，组合减速器功能将爆炸，并且还缺少特定于动作的订阅系统 - 据我所知，所有听众都会在发出行动时被执行 - 我在redux中的新功能可能是我错了）

Flux或Redux是有效模式并且满足比我更大的需求，我已经有Meteor用于那种工作。我唯一需要的是访问另一个内部的组件状态......

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

＆＃34;对＆＃34;是什么？解决这个问题的方法？

更新：

最近我给了redux一个机会，它似乎做了工作（这真的很棒，并得到很好的支持），所以如果你处于同样的情况，请检查React + Redux: submit multi-component form

Answer 1

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

例如：

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 Object的简单实现。或者您可以search in npm获取其他库。

“正确”方式

这是我能想到的最简单的实现，对于小项目来说，这是一个应该有效的快速简单的解决方案。

无论如何，只要项目有所增长，您的组件之间就会开始有很多动作/反应。对于您添加的每个新组件，跟踪所有组件之间的所有关系会变得更加复杂。在这里，将应用程序的全局状态存储在一个地方就可以了，这是redux基于的three principles之一：单一来源真相。

Answer 2

我认为这是您向应用介绍某种状态的最佳时机。试试Redux，它太棒了。

在React中共享组件之间的数据

2 个答案:

“正确”方式