如何在React中不同组件库之间共享上下文？

Question

在React中，有一种简便的方法可以在多层组件之间共享“信息”，即使用上下文（Context）。

import {UserCtx} from "./stores/UserCtx"; 
<UserCtx.Provider value={new user(info)}>
    <SomeComponent />
</UserCtx.Provider/>

然后在某个组件中：

import {UserCtx} from "./stores/UserCtx";
function SomeComponent() {
    const userData = React.useContext(UserCtx);
    return <div>JSON.stringify(userData)</div>
}

然而，这需要上下文对象的定义对于所有对象都可见。因此，在创建组件库时，它实际上无法使用？

例如在上述“示例”中，“SomeComponent”将是一个库组件，我如何将主应用程序的上下文分享到组件中？通过添加属性进行共享似乎不现实，在那一点上，我可以直接向用户（或上下文存储的任何内容）提供。

- paul23

---

有各种各样的库需要您使用它们的上下文提供程序来呈现它们的组件，那么您的问题是什么？我不确定您实际在这里问什么... - Jared Smith

@JaredSmith说我有一组组件，作为私有库内部构建，用于与主应用程序进行互操作。这意味着我必须重复为所有这些组件提供上下文的“逻辑”。 - paul23

我还是不明白。你创建了一个包含所需数据的上下文提供程序，将其放置在组件树的根附近，并在组件中使用它，就像你发布的示例一样。除非你将对useContext的调用视为重复逻辑，否则没有任何重复的逻辑。我认为如果你将上下文使用包装在自定义钩子中会更加清晰，但这并不是必须的，而且我不明白你发布的代码有什么问题或不可取之处。 - Jared Smith

当SomeComponent不是原始项目的一部分，而是作为单独的包加载时，代码将无法工作。该包将无法访问主项目源树中的./stores/UserCtx（因为它位于节点模块中）。 - paul23

@paul23 你解决了这个问题吗？我也遇到了同样的问题，不知道该如何解决。（我无法访问与Jared Smith最后一条评论中链接的聊天室。） - Creature

Answer 1

你的组件库中所有的组件都应该是值生成组件的子组件。也就是说，如果你的组件是暴露给DOM的主要组件，那么值应该在顶部出现，以便任何一个组件都可以使用上下文。

请注意，上下文非常有用，可以帮助你避免组件钻取。如果你需要比这更灵活的功能，Redux可能会给你更多的控制权。

- Niyi Aromokeye

Answer 2

假设我们有三个东西：

1. 主项目，其中包括上下文提供程序所在的模块和组件库所在的模块
2. 上下文提供程序模块
3. 组件库项目

为了使主项目和组件库项目共享相同的上下文提供程序，您不必将上下文提供程序模块添加为组件库项目的依赖项，而是作为开发依赖项。

- Agustin Lascialandare

---

这不是开发依赖项的作用。 - n.sh