ReactJS 检查 `Provider` ContextAPI 的渲染方法答案

【问题标题】：ReactJS check the render method of `Provider` ContextAPIReactJS 检查 `Provider` ContextAPI 的渲染方法
【发布时间】：2020-03-16 12:51:18
【问题描述】：

您好，我正在尝试使用 Context API，这是我的代码

App.js

import  {Provider}  from './components/contexApi/context';
class App extends Component {
  render() {
    return (
      <Provider>
        <div className="App"> 
          <Header />    
          <TodoList />
        </div>
      </Provider>
    );
  }
}

这是我的 context.js 文件

context.js

import React, { Component } from 'react'

const Context = React.createContext;

export class Provider extends Component {
    state = {

    }

    render() {
        return (
            <Context.Provider value={this.state}>
                {this.props.children}
            </Context.Provider>

        )
    }
}

export const Consumer = Context.Consumer;

保存文件后，主页显示：

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。检查Provider的渲染方法。

【问题讨论】：

标签： reactjs react-context

【解决方案1】：

React.createContext 是一个函数，你没有调用它。

https://reactjs.org/docs/context.html#reactcreatecontext

【讨论】：