Блог

У меня есть приведенное ниже сообщение, которое содержит состояние аутентификации в нем.

 export const AuthenticationContext = React.createContext();

export default class AuthenticationProvider extends React.Component {
  state = {
    isAuthenticated: false
  };

  render() {
    return (
      <AuthenticationContext.Provider value={{ state: this.state }}>
        {this.props.children}
      </AuthenticationContext.Provider>
    );
  }
}
  

Я перенес это в свои маршруты, как показано ниже:

      <Provider store={store}>
        <ConnectedRouter history={history}>
          <>
            <GlobalStyle />
            <AuthenticationProvider>
              <SiteHeader />
              <ErrorWrapper />
              <Switch>
                <PrivateHomeRoute exact path="/" component={Home} />
                <Route exact path="/login" component={LoginPage} 
              </Switch>
            </AuthenticationProvider>
          </>
        </ConnectedRouter>
      </Provider>
  

Но когда я пытаюсь получить состояние контекста в <SiteHeader /> , Context.Provide ничего не передается. Мой клиент находится внутри <SiteHeader /> является:

 class SiteHeader extends React.Component {
  render() {

    return (
      <div>
        <AuthenticationContext.Consumer>
          {context => (
            <header>this is header {context.state.isAuthenticated}</header>
          )}
        </AuthenticationContext.Consumer>
      </div>
    );
}
  

Я проверил React devtools, но это то же самое. Context.Consumer не имеет value реквизита из Provider .

В чем может быть проблема здесь?

Если значение равно false, null или не определено, оно не будет отображаться. Здесь я попробовал ваш код в изолированной среде. Просто добавил .toString() в заголовке, и значение логического значения отображается в заголовке.

Контекстные потребители не получают никаких данных в качестве реквизита. вместо этого мы передаем им render prop , в данном случае дочерние элементы, которые мы передаем, являются функцией render prop. и затем в методе визуализации потребителя происходит что-то вроде этого

 render(){
  this.props.children(value)
}
  

вот как мы получаем значение в качестве аргумента функции render prop.

Предполагается, что значение поставщика контекста не должно передаваться через props. Вы можете узнать больше о реквизитах рендеринга здесь