javascript - 如何在 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

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

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