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}</>;
}

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

有没有更好的方法来做到这一点？

Answer 1

将您的上下文放在它自己的文件中，例如Context.js。那么Parent.js 和Child.js 都可以导入。

Answer 2

通常情况下，您不会使子级成为父级的依赖项，而是通过使用props.children 将上下文提供程序组件与其子级松散耦合。

Parent.js:

export const MyContext = React.createContext();

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

export default Parent;

Child.js:

import { MyContext } from './Parent';

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

export default Child;

然后在创建虚拟 DOM 时使用 <Child /> 填充 props.children：

import Parent from './Parent';
import Child from './Child';

const App = () => {
    return <Parent><Child /></Parent>;
};

...