React 16.3中的上下文组件无效

Question

我正在尝试使用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>
    );
  }
}

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

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

看来，提供商和消费者组件都不有效，并且不能由React呈现。

我在这里错过了什么吗？

Answer 1

弄清楚了！

我更新了对16.3.1的反应，但没有更新反应。

运行npm uninstall -s react-dom && npm i -s react-dom将其更新为16.3.1并修复了问题。

旁注，我不会期望新的上下文API取决于ReactDom。

Answer 2

对于您当前情况，您必须返回TestContext.Consumer中的React元素。

提供商组件在树上使用更高的使用者，接受Prop 称为值(可以是任何东西(。

使用了消费者组件 树上的提供商下方的任何地方都接受一个称为的道具 "儿童"必须是接受价值的函数，必须 返回react元素(JSX(。

确保您渲染<Test />而不是<TestContext />，并且必须使用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"));

如何使用this.props.children

进行操作的示例

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