javascript - 导出上下文不适用于 contextType

Question

我有一个文件 App.js，默认从中导出一个 React 组件。除此之外，同一个文件导出一个 React 上下文。

在子组件中使用上下文时(使用 static contextType = Context)，我只收到以下警告:

Warning: Versions defines an invalid contextType. contextType should point to the Context object returned by React.createContext(). However, it is set to undefined. This can be caused by a typo or by mixing up named and default imports. This can also happen due to a circular dependency, so try moving the createContext() call to a separate file.

this.context 也是未定义的。

但是，在 render 方法中使用消费者就可以了:

<Context.Consumer>{({ name }) => <p>{name}</p>}</Context.Consumer>

为了更好地理解这个问题，这里有一个例子:https://codesandbox.io/s/empty-wood-qzrk1?fontsize=14 (请参阅控制台以获取警告)。

我做错了什么？

Answer 1

问题是 App.js 和子组件 version.js

之间存在循环依赖

要解决这个问题，您需要做的就是将上下文创建移动到一个单独的文件中

Working demo