Question

我有以下两个班级组成部分：

Class App extends Component {
  constructor(props) {
    super(props);
    this.state = ({});
  }

  render() {
    return (
      <div className="App">
        <GameContext.Consumer>
          {value => value.isInGame ? <Game /> : <h1>Not in game</h1>}
        </GameContext.Consumer>
      </div>
    );
  }
}

以及App中的Game组件：

class Game extends Component {
    constructor(props) {
        super(props);
        this.state = ({});
    }

    render() {
        return (
            <div>
                <GameContext.Provider value={{isInGame: false}}>
                    <Content/>
                </GameContext.Provider>
            </div>
        );
    }
}

因此，默认情况下，我在isInGame中定义的GameContext是true。然后，应用程序呈现Game组件，该组件被包装为提供程序，并且传递了一个从未到达应用程序的值-消费者。

已正确导入上下文并使用React.createContext({isInGame: true})创建了上下文。

还尝试在应用程序中使用静态contextType而不是将其包装为使用者，但没有成功。我想念什么？预先感谢。

Answer 1

您的<Game />中有<App />。上下文中的默认值= {}（React.createContext（{}））。因此，应用程序永远不会进入<Game />组件中。

原因：

<GameContext.Consumer>
  {value => value.isInGame ? <Game /> : <h1>Not in game</h1>}
</GameContext.Consumer>

React上下文API-无法从子提供者那里更新父使用者

1 个答案: