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接受"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抛出错误

1 个答案: