Question

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

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可能会为您提供更多功能。

Answer 2

假设我们有3件事：

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

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

如何在不同的组件库之间共享上下文以做出反应？

2 个答案: