Контекст реагирования Обеспечьте, чтобы значение не передавалось потребителю

Question

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

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.Мой Cosumer находится внутри <SiteHeader />:

class SiteHeader extends React.Component {
  render() {

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

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

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

Answer 1

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

Answer 2

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

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

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

Значение провайдера контекста не должно передаваться через реквизиты. Вы можете узнать больше о рендер реквизит здесь