javascript - useContext 跨文件导致循环依赖

Question

我有两个组件 Parent 和 Child，我想将上下文从 Parent 导出到 Child，但这会导致循环依赖。
例如，考虑 Parent.js 是

import {Child} from './Child.js';

export const MyContext = React.createContext();

const Parent = () => {
    return <MyContext.Provider><Child /></MyContext.Provider>;
}

和 Child.js 作为

import {MyContext} from 'Parent';

const Child = () => {
    const myContext = useContext(MyContext);
    return <>{myContext}</>;
}

我可以将它作为 Prop 传递，但如果有多层嵌套，那就很难了。我能想到的一个可能的解决方案是使用另一个名为 contexts.js 的文件。并从那里导出我所有的上下文。
有一个更好的方法吗？

Answer 1

将您的上下文放在它自己的文件中，例如 Context.js .然后两个Parent.js和 Child.js可以导入。