Question

我正在使用react.js建立一个网站。客户端通过ajax接收一个巨大的json，然后用于填充所有必要的字段，图形等。看到这个json将涵盖网站上包含的几乎所有信息，它几乎可以在每个组件中访问。是否有一种干净的方式将它传递给每个最后一个组件（并且有很多组件）？将常规方式传递给~70个组件似乎很脏而且效率低下。

Answer 1

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

在componentWillUnmount()内部组件进入＆＃34;超出范围＆＃34;时，请小心并取消绑定事件。

如果不这样做将导致内存泄漏，因为您将悬挂事件处理程序，并且每次提取网站数据时都会调用它，即使您的Component实例已从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

Answer 2

Context可能适合该法案。它可能不是特别整洁的解决方案，但也许这将是你的起点。

如何将prop传递给react.js中的每个组件？

2 个答案: