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

Question

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

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是一个库组件，我如何将主应用程序的上下文共享给该组件？通过添加属性来共享似乎有些牵强，在这一点上我不妨直接提供用户（或上下文存储的任何内容）？

Answer 1

您的所有组件库都应该是生成值的组件的子级。也就是说，如果您的组件是暴露给 DOM 的主要组件，则值应该位于顶部，以便任何组件都可以使用上下文。

请注意，上下文可以很好地帮助您避免对组件进行钻探。如果您需要比这更多的灵活性，Redux 可能会为您提供更多功能。