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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

考虑下图：

从另一个示例反应隐藏组件

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

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

我知道可以通过一些技巧来解决此问题（例如，流星会话，通过每个组件传递数据，基于通量的Action / Dispatcher）。

Reactdocs建议使用事件/订阅系统（通量是一种可能的解决方案，但通量不止此…）在组件之间进行通信

Redux是另一种可能性（我担心这样一个事实，对于大型应用程序，如果我有很多动作，则组合归约器功能将爆炸，并且还担心缺少特定于动作的订阅系统-

到目前为止我知道在调度操作时将执行所有侦听器-Redux中的新用户也许我错了）

Flux或Redux是有效的模式，可以满足比我更大的需求，我已经进行过Meteor这类工作。我唯一需要的是访问另一个内部的组件状态。

我需要具有大量组件视图的中型/大型应用程序的可伸缩解决方案

解决该问题的“正确”方法是什么？

更新：

最近我给了redux一个机会，它似乎可以完成工作（它确实很棒并且得到了很好的支持），因此，如果您在相同的情况下，请检查React +Redux：提交多组件表单

回答：

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

例如：

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的简单实现。或者，您可以在npm中搜索其他库。

在 “正确”的 方式

这是我能想到的最简单的实现，对于小型项目而言，这是一个应该可行的快速简便的解决方案。

无论如何，就项目的增长而言，您将在组件之间开始有很多 。随着每个新组件的添加，跟踪所有组件之间的所有这些

将变得更加复杂。在这里将应用程序的 全局

状态存储在一个地方很方便，这是redux基于的三项原则之一：

。

以上是 在React中的组件之间共享数据 的全部内容， 来源链接： utcz.com/qa/411607.html

回到顶部