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>
    );
  }
}

但是代码不会呈现,而是产生此错误：

未捕获的错误：元素类型无效：期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到：object.

似乎Provider和Consumer组件都不是有效组件,并且不能由React呈现.

我在这里错过了什么吗？