javascript - 如何在同一组件中提供和使用上下文？

Question

我正在为我的游戏应用程序使用 React context api，并创建了一个 GameContext.js

import React, { useState, createContext } from 'react';

const GameContext = createContext();
const GameProvider = ({ children }) => {
  const [startgame, setStartgame] = useState(false);

  return (
    <GameContext.Provider value={[startgame, setStartgame]}>
      {children}
    </GameContext.Provider>
  );
};

export { GameContext, GameProvider };

在 App.js 中我提供了上下文。

import { GameProvider, GameContext } from './context/GameContext';

const App = () => {
    console.log(useContext(GameContext), 'Gamecontext');
    return (
      <GameProvider>

        <div className="App">
            {!startgame ? <WelcomeScreen />
        : <GameScreen />}
        </div>
      </GameProvider>
    );
  };
  export default App;

这不起作用，因为在 App.js 中无法访问 startgame。
另外，我注意到 useContext(GameContext) 是未定义。我想在 App.js 中使用 startgame 值，但我无法解构未定义的值。如何在同一个组件 App.js 中提供和使用上下文？这是正确的方法还是遗漏了什么？

Answer 1

您需要使用Context.Consumer组件而不是 useContext 钩子(Hook)。因为当您提供上下文时，它只能通过 useContext 钩子(Hook)或 this.context 在其子级而不是父级中使用。在这种情况下，您需要使用 MyContext.Consumer组件。

import { GameProvider, GameContext } from './context/GameContext';

const App = () => {
  return (
    <GameProvider>
      <div className="App">
        <GameContext.Consumer>
          {(ctx) => (!ctx.startgame ? <WelcomeScreen /> : <GameScreen />)}
        </GameContext.Consumer>
      </div>
    </GameProvider>
  );
};

export default App;

来自 React 文档:

Consumer - Requires a function as a child. The function receives the current context value and returns a React node. The value argument passed to the function will be equal to the value prop of the closest Provider for this context above in the tree. If there is no Provider for this context above, the value argument will be equal to the defaultValue that was passed to createContext().