Как обеспечить и использовать контекст в одном компоненте? - PullRequest
Новая
       1

Как обеспечить и использовать контекст в одном компоненте?

0 голосов
/ 27 марта 2020

Я использую api context context для своего игрового приложения и создал 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 };

И в приложении. 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;

Это не работает, потому что стартовая игра недоступна в приложении. js.
Также я заметил, что useContext(GameContext) - это undefined. Я хочу использовать значение startgame в приложении. js, но не могу уничтожить неопределенное значение. Как можно обеспечить и использовать контекст в одном компоненте приложения. js? Это правильный путь или я что-то упустил?

1 Ответ

2 голосов
/ 27 марта 2020

Вам нужно использовать компонент 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:

Потребитель - Требуется функционировать как ребенок. Функция получает текущее значение контекста и возвращает узел React. Значение аргумента, переданное функции, будет равно значению prop ближайшего провайдера для этого контекста выше в дереве. Если для этого контекста нет поставщика, значение аргумента будет равно значению defaultValue, которое было передано createContext ().

...