Javascript ReactJS - 如何将“全局”数据传递给深度嵌套的子组件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26120230/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ReactJS - how to pass "global" data to deeply nested child components?
提问by Brad Parks
How do people typically approach having "global" data in a React application?
人们通常如何在 React 应用程序中处理“全局”数据？
For example, say I have the following data for a user once they're logged into my app.
例如，假设用户登录到我的应用程序后，我有以下数据。
user: {
email: '[email protected]',
name: 'John Doe'
}
This is data that almost any component in my app might like to know about - so it could either render in a logged in or logged out state, or perhaps display the users email address if logged in.
这是我的应用程序中几乎所有组件都可能想知道的数据 - 因此它可以在登录或注销状态下呈现，或者在登录时显示用户的电子邮件地址。
From my understanding, the React way of accessing this data in a child component is for a top level component to own the data, and pass it to child components using properties, for example:
根据我的理解，React 在子组件中访问这些数据的方式是让顶级组件拥有数据，并使用属性将其传递给子组件，例如：
<App>
<Page1/>
<Page2>
<Widget1/>
<Widget2 user={user}/>
</Page2>
</App>
But this seems unwieldy to me, as that would mean I'd have to pass the data through each composite, just to get it to the child that needed it.
但这对我来说似乎很笨拙，因为这意味着我必须通过每个组合传递数据，才能将其传递给需要它的孩子。
Is there a React way of managing this type of data?
是否有管理此类数据的 React 方式？
Note: This example is very simplified - I like to wrap intents up as composites so implementation details of entire UI features can be drastically changed as I see fit.
注意：这个例子非常简单——我喜欢把意图包装成复合材料，这样整个 UI 功能的实现细节可以在我认为合适的时候彻底改变。
EDIT: I'm aware that by default, calling setStateon my top level component would cause all child components to be re-rendered, and that in each child component I can render using whatever data I like (e.g. global data, not just state or props). But how are people choosing to notify only certain child components that they should be rendered?
编辑：我知道默认情况下，调用setState我的顶级组件会导致所有子组件重新渲染，并且在每个子组件中我可以使用我喜欢的任何数据（例如全局数据，而不仅仅是状态或道具）。但是人们如何选择只通知某些子组件应该渲染它们呢？
采纳答案by Brad Parks
Since I originally answered this question, it's become apparent to me that React itself doesn't support "global" data in any sense - it is truly meant to manage the UI and that's it. The data of your app needs to live somewhere else. Having said that, it does now support accessing global contextdata as detailed in this other answer on this page. This repo (Unstated) supposedly wraps up contextin a nicer way, for those that are interested, and here's a good article by Kent Doddson how the contextapi has evolved, and is now officially supported in React.
自从我最初回答这个问题以来，我很明显 React 本身不支持任何意义上的“全局”数据——它真正用于管理 UI，仅此而已。您的应用程序的数据需要位于其他地方。话虽如此，它现在确实支持访问本页其他答案中详述的全局context数据。对于那些感兴趣的人来说，这个 repo ( Unstated) 应该以更好的方式结束，这里是 Kent Dodds 的一篇关于api如何发展的好文章，现在在 React 中得到正式支持。contextcontext
The contextapproach should only be used for truly global data. If your data falls into any other category, then you should do as follows:
该context方法应仅用于真正的全局数据。如果您的数据属于任何其他类别，那么您应该执行以下操作：
- Facebook themselves solve this problem using their own Fluxlibrary.
- Mobxand Reduxare similar to Flux, but seem to have more popular appeal. They do the same thing, but in a cleaner, more intuitive way.
I'm leaving my original edits to this answer below, for some history.
对于一些历史，我将在下面的这个答案中留下我的原始编辑。
OLD ANSWER:
旧答案：
到目前为止，我为此找到的最佳答案是这 2 个 React mixin，我还没有机会尝试，但它们听起来像是可以解决这个问题：
https://github.com/dustingetz/react-cursor
https://github.com/dustingetz/react-cursor
and this similar library:
和这个类似的图书馆：
https://github.com/mquan/cortex
https://github.com/mquan/cortex
MAJOR NOTE: I thinkthis is a job for Facebook's Flux, or something similar (which the above are). When the data flow gets too complex, another mechanism is required to communicate between components other than callbacks, and Flux and it's clones seem to be it....
主要说明：我认为这是Facebook 的 Flux或类似的工作（以上是）。当数据流变得过于复杂时，除了回调之外，还需要另一种机制来在组件之间进行通信，而 Flux 及其克隆似乎就是它......
回答by Steve Taylor
Use the React Context PropertyThis is specifically for passing global data sets down the chain without explicitly forwarding them. It does complicate your Component lifecycle functions though, and note the cautions offered on the page I've linked.
使用React Context 属性专门用于在链中向下传递全局数据集，而无需显式转发它们。尽管如此，它确实使您的组件生命周期功能复杂化，并注意我链接的页面上提供的注意事项。
回答by BoxerBucks
What's wrong with just passing data all the way down the component chain via rendering all children with {...restOfProps}?
通过使用 {...restOfProps} 渲染所有子项，将数据一直沿组件链向下传递有什么问题？
render(){
const {propIKnowAbout1, propIKnowAbout2, ...restOfProps} = this.props;
return <ChildComponent foo={propIKnowAbout1} bar={propIKnowAbout2} {...restOfProps}/>
}
回答by mukeshmandiwal
You can use the React Context APIfor passing global data down to deeply nested child components. Kent C. Doddswrote an extensive article on it on Medium React's ?? new Context API. It'll help in getting a better understanding of how to use the API.
您可以使用React Context API将全局数据向下传递到深层嵌套的子组件。Kent C. Dodds在 Medium React's ?? 新的上下文 API。它将有助于更好地了解如何使用 API。
