在React中,有一种简便的方法可以在多层组件之间共享“信息”,即使用上下文(Context)。
然而,这需要上下文对象的定义对于所有对象都可见。因此,在创建组件库时,它实际上无法使用?
例如在上述“示例”中,“SomeComponent”将是一个库组件,我如何将主应用程序的上下文分享到组件中?通过添加属性进行共享似乎不现实,在那一点上,我可以直接向用户(或上下文存储的任何内容)提供。
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”将是一个库组件,我如何将主应用程序的上下文分享到组件中?通过添加属性进行共享似乎不现实,在那一点上,我可以直接向用户(或上下文存储的任何内容)提供。
useContext
的调用视为重复逻辑,否则没有任何重复的逻辑。我认为如果你将上下文使用包装在自定义钩子中会更加清晰,但这并不是必须的,而且我不明白你发布的代码有什么问题或不可取之处。 - Jared SmithSomeComponent
不是原始项目的一部分,而是作为单独的包加载时,代码将无法工作。该包将无法访问主项目源树中的./stores/UserCtx
(因为它位于节点模块中)。 - paul23