反应 createContext 抛出错误答案

【问题标题】：React createContext throwing errors反应 createContext 抛出错误
【发布时间】：2020-08-23 16:39:59
【问题描述】：

我正在尝试学习 React 上下文 API。我正在尝试创建一个默认值为绿色的上下文，后来由上下文提供程序更改为红色。我得到的错误是“未定义值”。尝试通过提供恒定颜色来临时解决问题，但出现渲染错误。如何让这段代码成功使用上下文 API 并传递颜色？

import React from "react";
import "./styles.css";
const Counter = React.createContext("green");

export default function App() {
  return (
    <>
      <Counter.Provider value={"red"}>
        <Counter.Consumer>
          <div className="App">
            <h1 style={{ color: value }}>Hello World!</h1>
          </div>
        </Counter.Consumer>
      </Counter.Provider>
    </>
  );
}

附：我尝试实现 React.useContext 而不是仅传递值，但引发了引用错误，打印“值”未定义。

代码沙盒：https://codesandbox.io/s/suspicious-buck-xvvlf?file=/src/App.js

【问题讨论】：

标签： javascript reactjs react-context

【解决方案1】：

正如文档所说，context consumer 接受 "render prop" style function 作为孩子。

import React from "react";
import "./styles.css";
const Counter = React.createContext("green");

export default function App() {
  return (
    <>
      <Counter.Provider value={"red"}>
        <Counter.Consumer>
          {(value) => (  // <-- new
            <div className="App">
              <h1 style={{ color: value }}>
                Hello World!
              </h1>
            </div>
          )}
        </Counter.Consumer>
      </Counter.Provider>
    </>
  );
}

【讨论】：