Блог

Я пытаюсь изучить React context API. Я пытаюсь создать контекст со значением по умолчанию green, позже измененным поставщиком контекста на red. Я получаю ошибку «значение не определено». Пытаясь временно устранить проблему, предоставив постоянный цвет, я получаю ошибку рендеринга. Как заставить этот код успешно использовать context 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>
    </>
  );
}
  

PS Я попытался реализовать React.useContext вместо простой передачи значения, но была выдана ошибка ссылки, указывающая, что «значение» не определено.

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

Как говорится в документах, потребитель контекста принимает функцию стиля «render prop» как дочернюю.

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