反应 createContext 抛出错误

Question

我正在尝试学习 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>
    </>
  );
}

P.S。我尝试实施 React.useContext 而不是仅仅传递值，但是在打印“值”未定义时抛出引用错误。

Codesandbox：https://codesandbox.io/s/suspicious-buck-xvvlf?file=/src/App.js

Answer 1

正如文档所说，context consumer accepts a "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>
    </>
  );
}

反应 createContext 抛出错误

React createContext throwing errors

javascript

reactjs

react-context