反应上下文提供者在渲染方法中引发错误

Question

我正在试验react context API，这是我正在处理的代码：

import * as React from 'react';

interface ProviderState {
  themeColor: string;
}

interface UpdateStateArg {
  key: keyof ProviderState;
  value: string;
}

interface ProviderStore {
  state: ProviderState;
  update: (arg: UpdateStateArg) => void;
}

const Context = React.createContext({} as ProviderStore);

class Provider extends React.Component<{}, ProviderState> {
  readonly state = {
    themeColor: 'red'
  };

  private update = ({ key, value }: UpdateStateArg) => {
    this.setState({ [key]: value });
  }

  render() {
    const store: ProviderStore = {
      state: this.state,
      update: this.update
    };

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

export { Provider };

呈现方法中的“提供者”抛出以下错误：

"JSX element type 'ReactElement<any> | null' is not a constructor function for JSX elements.Type 'null' is not assignable to type 'ElementClass"

在react声明文件中，已经声明了“ Provider”，并且我认为它已经正确声明了，否则我可能是错的！

我正在使用以下版本：

react: "^16.5.0"
react-dom: "^16.5.0"
@types/react: "^16.4.7"
@types/react-dom: "^16.0.7"