跨文件的 useContext 导致循环依赖

Question

我有两个组件“父组件”和“子组件”，我想将上下文从“父组件”导出到“子组件”，但这会导致循环依赖。

例如，考虑 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}</>;
}

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

有一个更好的方法吗？

Answer 1

将您的上下文放入它自己的文件中， .eg Context.js。然后两者Parent.js都Child.js可以导入它。