如何将道具传递给 react.js 中的每个组件？答案

【问题标题】：How to pass a prop to every component in react.js?如何将道具传递给 react.js 中的每个组件？
【发布时间】：2015-10-12 13:58:07
【问题描述】：

我正在使用 react.js 建立一个站点。客户端通过 ajax 接收到大量 json，然后用于填充所有必要的字段、图表等。鉴于此 json 将涵盖站点上包含的几乎所有信息，因此几乎可以在每个单独的组件中访问它。有没有一种干净的方法可以将它传递给每个最后一个组件（并且有很多）？以常规方式将其传递给大约 70 个组件似乎很脏且效率低下。

【问题讨论】：

放在商店里...

标签： javascript reactjs

【解决方案1】：

正如 React 的文档所述，您可以通过集成全局事件系统让组件进行通信，然后在 componentDidMount() 中从所有组件订阅 application-data 事件。
这样，每次您从负责提取网站数据的代码中发出 application-data 事件时，所有组件都将接收该数据。届时，您可以拨打setState()。

一旦组件“超出范围”，请注意并取消绑定事件，在 componentWillUnmount() 内。

不这样做会导致内存泄漏，因为您将有事件处理程序悬空，并且每次您拉取网站数据时都会调用它，即使您的组件的实例已从 DOM 中删除。

您也可以尝试让您的组件自己提取数据，因为发送大量 JSON 并不是最好的解决方案。我的意思是，每个组件都应该使用它需要的数据才能工作，而不是整个网站数据。我改变这种情况的方法是解析 JSON 对象并将其存储在一个变量中以供参考，在所有组件都可以访问的范围内，并使用事件系统仅通知组件数据已准备好，并且每个组件将转到全局数据对象并获取它们的数据。

示例（伪代码）：

XHR.getData
XHR.onReadyState => GlobalNameSpace.data = data
EventSystem.PUBLISH('application-data')

// component code
Component {
    EventSystem.SUBSCRIBE('application-data') => 
        dataNeededForInit  = GlobalNameSpace.data.componentXData
}

参考：https://facebook.github.io/react/tips/communicate-between-components.html

【讨论】：

【解决方案2】：

Context 可能符合要求。这可能不是特别整洁的解决方案，但也许这对您来说是一个起点。

【讨论】：

这样更好，但幅度不大，因为结构大致是父母 -> 13 个孩子 -> 每个孩子有 4-5 个孙子。这意味着我仍然需要声明 50 多次
是的。如果您只是想破解它，您可以将上下文处理推送到继承自 React.Component 的超类，然后从您的组件中使用它。这不太好，但我认为它会起作用。