跨文件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}</>;
}

我可以将其作为 props 传递，但如果有多层嵌套，这将很困难。我能想到的一个可能的解决方案是使用另一个名为 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>;
};

...

跨文件useContext导致循环依赖

useContext across files causes circular dependencies

javascript

reactjs

react-hooks

use-context