使用动态上下文数据时如何用新的 React 上下文 api 替换旧的 React contextTypes？

Posted 2023-04-14

【中文标题】使用动态上下文数据时如何用新的 React 上下文 api 替换旧的 React contextTypes？

【英文标题】：How to replace old React contextTypes with new React context api when using dynamic context data?

【发布时间】：2019-03-28 04:38:43

【问题描述】：

我有一个在 html 页面上呈现多个根的应用程序。 每个根在网站上呈现不同（或可能相同）的页面或组件。 该应用程序包含一个 redux 商店，因为每个根共享同一个应用程序。 为避免冲突，为每个根生成一个 redux 存储。

现在 redux 商店有延迟负载减少器。 在加载代码拆分组件时添加减速器。

为了适应这种情况，在 store 中添加了一个函数来从 redux 调用 replaceReducer。

所以当一个组件被加载并且还需要加载一个 reducer 时，问题就出现了。 组件需要从 redux 提供者访问根存储。

这是通过使用旧的 react 上下文 api 中的 contextTypes 来访问商店来实现的。包装器组件中的 contextTypes 拉取存储的当前根实例。

但是使用新的 react context api，这似乎不兼容。 建议是创建一个上下文文件并在任何子组件中使用它。 这样做，我需要将商店放入反应上下文提供者值中。 但是这样做意味着 react 上下文将只保存 1 个 store 实例。

如何让它像旧的 react contextTypes 一样工作以相应地访问根级别的提供者上下文？

【参考方案1】：

我觉得这里有误会。

基本上您想要的是使用 new 上下文读取 legacy 上下文（这是 React Redux 当前提供的，以及您使用 contextTypes 阅读的内容） API。这行不通。旧版和新版上下文 API 完全不相关（即使它们服务于相同的用例）。

当将来 React Redux 切换到新的上下文 API 时，你应该能够做到这一点。请注意，在任何一种情况下，都不鼓励直接将遗留上下文 API 与 React Redux 一起使用，您可能应该改用 connect()。

【参考方案2】：

也许this article 会帮助您迁移到新的上下文 API。 长话短说：您可以使用旧 API 传递数据并使用新 API 读取数据。不过，我不建议在您的特定情况下这样做。