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

在react中，有一种在多个组件层中共享“信息”的简单方法。这是通过使用上下文实现的

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

从“/stores/UserCtx”导入{UserCtx}；

然后在某些组件中：

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

从“/stores/UserCtx”导入{UserCtx}；
函数SomeComponent（）{
const userData=React.useContext（UserCtx）；
返回JSON.stringify（userData）
}

但是，这要求上下文对象定义对所有对象都可见。因此，当创建一个组件库时，它真的不能被使用吗

---

假设在上面的“示例”

SomeComponent

是一个库组件，我如何将主应用程序的上下文共享给该组件？通过添加属性进行共享似乎有些牵强，在这一点上，我还不如直接向用户（或上下文存储的任何内容）提供？

所有组件库都应该是生成值的组件的子组件。也就是说，如果您的组件是向DOM公开的主要组件，那么值应该位于该顶部，以便任何组件都可以使用上下文

---

请注意，上下文非常有助于避免钻取组件。如果您需要更多的灵活性，Redux可能会为您提供更多的功能。

假设我们有三件事：

主项目包括上下文提供程序所在的模块和组件库所在的模块

上下文提供程序模块

组件库项目

---

要使主项目和组件库项目共享同一个上下文提供程序，您不必将上下文提供程序模块作为依赖项添加到组件库项目中，而是作为开发人员依赖项添加到组件库项目中，那么你的问题是什么？我不确定你到底在问什么…@JaredSmith说我有一套组件，内部构建为私有库，与主应用程序进行互操作。。这意味着我必须重复为所有这些组件提供上下文的“逻辑”。同样，我不明白。创建一个包含所需数据的上下文提供程序，将其放在组件树的根附近，然后在组件中使用它，就像您发布的示例中所示。任何地方都没有重复逻辑，除非将对

useContext

的调用计算为重复逻辑。我认为如果将上下文使用包装到自定义挂钩中会更干净一些，但这并不是绝对必要的，而且我不理解您发布的代码中有什么不可取或不起作用。当

SomeComponent

不是原始项目的一部分，而是作为单独的包加载时，代码不起作用。该包无法访问主项目源代码树中的

/stores/UserCtx

（因为它位于节点模块中）。因此，将上下文提供程序作为自定义组件库的一部分，并使用相关的应用程序状态参数化其创建。调用者（主项目）将负责使用正确的数据实例化它并将其放置在渲染树中，而使用者（自定义库组件）将使用它。