React 16.3.1中使用Context组件报错：Element type is invalid

这个Element type is invalid错误在React里通常意味着你尝试渲染的不是一个有效的React组件/元素，结合你的代码和React 16.3.1的Context API特性，我整理了几个最可能的原因和对应的解决办法：

1. 缺失Component的正确导入 #

你的Test类继承了Component，但如果没有正确从React中导入它，React就无法识别这个类是有效的组件。你需要确保导入语句包含Component：

// 正确的导入方式一：解构导入Component
import React, { Component } from 'react';
// 正确的导入方式二：直接使用React.Component
class Test extends React.Component { ... }

2. 确认React版本确实是16.3.1 #

虽然你提到使用的是16.3.1，但有时依赖安装可能出现版本不一致的情况。React.createContext()是在React 16.3.0才正式推出的API，如果你的实际版本低于这个，就会导致TestContext.Provider和TestContext.Consumer不是有效的React元素。

你可以在项目根目录运行以下命令检查版本：

npm list react
# 用yarn的话执行这个
yarn list react

如果版本不对，执行升级命令：

npm install react@16.3.1 react-dom@16.3.1 --save

3. 组件导入方式错误 #

你给Test组件用了默认导出（export default class Test...），但如果在其他文件中使用命名导入的方式引入它，就会导致渲染无效元素：

// 错误的导入方式
import { Test } from './Test';
// 正确的导入方式
import Test from './Test';

4. 拼写错误检查 #

仔细检查TestContext.Provider和TestContext.Consumer的拼写，比如把Consumer写成Consummer这类笔误，也会导致React无法识别这个元素类型。

修正后的完整代码 #

这里是包含正确导入的完整代码示例，你可以参考：

import React, { Component } from 'react';

const TestContext = React.createContext();

export default class Test extends Component {
  render () {
    return (
      <TestContext.Provider value="abc">
        <TestContext.Consumer>
          {value => (
            <div>{value}</div>
          )}
        </TestContext.Consumer>
      </TestContext.Provider>
    );
  }
}

按照上面的步骤逐一排查，应该就能解决这个渲染错误了。

内容的提问来源于stack exchange，提问作者David Mihal