人们通常如何在React应用程序中拥有“全局”数据?
例如,假设一个用户登录到我的应用程序后,我有以下数据。
user: {
email: 'test@user.com',
name: 'John Doe'
}
<App>
<Page1/>
<Page2>
<Widget1/>
<Widget2 user={user}/>
</Page2>
</App>
但这对我来说似乎很困难,因为这意味着我必须通过每个组合传递数据,只是为了将其传递给需要它的孩子。
是否有一种React方法来管理这种类型的数据?
注意:这个示例非常简化--我喜欢将意图包装成复合,这样整个UI特性的实现细节就可以在我认为合适的时候进行彻底的更改。
编辑:我知道默认情况下,在我的顶层组件上调用setstate
将导致所有子组件被重新呈现,并且在每个子组件中,我可以使用我喜欢的任何数据(例如,全局数据,而不仅仅是状态或道具)来呈现。但是人们如何选择只通知某些子组件应该呈现它们呢?
自从我最初回答了这个问题以来,对我来说,React本身显然不支持任何意义上的“全局”数据--它实际上是用来管理UI的,仅此而已。你的应用程序的数据需要生活在其他地方。话虽如此,它现在确实支持访问全局context
数据,这在本页的另一个答案中有详细说明。对于感兴趣的人来说,这个repo(未声明)应该以一种更好的方式包装了context
,这里有一篇由Kent Dodds撰写的关于context
api是如何发展的很好的文章,现在React中正式支持这个api。
context
方法应该只用于真正全局的数据。如果您的数据属于任何其他类别,那么您应该按照以下步骤进行:
我在下面留下了我对这个答案的原始编辑,作为一些历史。
老答:
https://github.com/dustingetz/react-cursor
和这个类似的库:
https://github.com/mquan/cortex
主要注意:我认为这是一个工作的脸书的流量,或类似的东西(以上是)。当数据流变得太复杂时,除了回调之外,还需要另一种机制来在组件之间进行通信,而Flux及其克隆似乎就是它....
在我的Angular 2路由的一个模板(FirstComponent)中,我有一个按钮 first.component.html 我的目标是实现: 按钮点击->route to另一个组件,同时保留数据,而不使用另一个组件作为指令。 这是我试过的... 第一种方法 在同一个视图中,我存储、收集基于用户交互的相同数据。 First.Component.TS 通常通过ID路由到SecondCompone
如果问题中使用的术语不正确,请与我一起,因为这是我第一次使用react JS。我通过参考大量的博客、youtube、文档等编写了一些代码,现在我被困住了,因为它是所有东西的混合体。 我需要对一个endpoint(关于.js组件)进行get调用,该endpoint返回json数据,这些数据将被传递给(workspace.js组件),在那里呈现和显示这些数据。到目前为止,它运行良好。 下一步,有一个链
问题内容: 我正在尝试将数据从子组件发送到其父组件,如下所示: 这是子组件: 我需要的是由用户在父组件中获取选定的值。我收到此错误: 谁能帮我发现问题? PS子组件正在从json文件创建一个下拉列表,并且我需要该下拉列表来显示json数组的两个元素彼此相邻(例如:“ aaa,english”是首选!) 问题答案: 这应该工作。在发送回道具时,您将其作为对象发送,而不是作为值发送,或者将其用作父组件
作为React课程的一部分,我正在制作一个虚拟电子商店,并希望将产品从一个组件的状态传递到功能组件并在那里显示产品属性。如何将数据从状态传递到无状态组件? 我设置了一个组件ProductList,它存储产品(从api获取)和ProductDetail,它应该显示详细信息(通过id找到产品并显示它的描述、img等)。我设置了一个pp.js,它有两个路由-列表和详细信息。 pp.js: Product
问题内容: 我有一个具有与组件本身相同类型的子组件的组件。我也可以渲染孩子,但是孩子似乎无法访问他们的状态。我在Redux中使用React 另外,我正在使用Material-ui中的ListItem(它们最终呈现在List组件中),并且我的代码受到官方redux回购中的树视图示例的严重影响。我的状态如下所示: 所示状态与树状示例中的状态相同 问题答案: 好吧,如果我理解正确,那么您希望这些组件从r