Javascript React 16.3中的上下文组件无效

我正在尝试使用React 16.3.1中的新上下文组件。我正在运行一个非常简单的示例：

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

const TestContext=React.createContext（）；
导出默认类测试扩展组件{
渲染（）{
返回(
{value=>(
{value}
)}
);
}
}

但是，代码不会呈现，而是产生以下错误：

Uncaught错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：object。

似乎提供者和使用者组件都不是有效的组件，不能由React呈现

---

我在这里遗漏了什么吗？

对于您当前的情况，您必须在

TestContext.Consumer

中返回一个react元素

提供者组件在树的较高位置使用，并且接受道具 调用值（可以是任何值）

使用消费者组件 树中提供程序下方的任意位置，并接受名为 “children”必须是一个接受该值的函数，必须 返回一个react元素（JSX）。

确保渲染

而不是

，并且必须处于react和react dom 16.3.1上

const TestContext = React.createContext();

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

render(<Test />, document.getElementById("root"));

明白了

我将React更新为16.3.1，但没有更新ReactDOM

运行

npm uninstall-s react dom&&npm i-s react dom

将其更新为16.3.1并修复了该问题

---

顺便说一下，我没有想到新的上下文API会依赖于ReactDOM。

返回元素很好，我已经更新了我的问题，添加了一个标记。但是，我仍然得到相同的“元素类型无效”错误，这可以在16.3.1上使用吗？告诉我你在哪里找到的！我将react更新为16.3.1，但没有更新react dom。更新dom修复了它。谢谢@omar！我写了为什么会这样

import React from "react";
import { render } from "react-dom";

const TestContext = React.createContext();

class TContext extends React.Component {
  state = {
    value: "abc"
  };
  render() {
    return (
      <TestContext.Provider
        value={{
          state: this.state
        }}
      >
        {this.props.children}
      </TestContext.Provider>
    );
  }
}

class Child extends React.Component {
  render() {
    return (
      <TContext>
        <TestContext.Consumer>
          {context => <div>{context.state.value}</div>}
        </TestContext.Consumer>
      </TContext>
    );
  }
}

render(<Child />, document.getElementById("root"));