如何向react.js中的每个组件传递一个prop

How to pass a prop to every component in react.js?

本文关键字：prop 一个 组件 react js      更新时间：2023-09-26

我正在使用react.js建立一个网站。客户端通过ajax接收大量json，然后用于填充所有必要的字段、图形等。由于这个json将涵盖网站上包含的几乎所有信息，因此几乎每个组件都可以访问它。是否有一种干净的方式将它传递给每个最后的组件(有很多组件)?以常规方式传递给70个组件似乎既脏又低效。

正如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

上下文可能符合要求。这可能不是一个特别整洁的解决方案，但这可能是一个起点。

相关文章：