React Context Provide 不将值传递给消费者

Question

我有下面的提供，其中包含身份验证状态。

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>
    );
}

我检查了 React devtools，但它是一样的。 Context.Consumer 没有来自 Provider 的 value 属性。

这可能是什么问题？

Answer 1

上下文消费者不会获得任何数据作为道具。相反，我们传递给它们 render prop，在这种情况下，我们传递的 children 是 render prop 函数。然后在 Consumer 的 render 方法中会发生这样的事情

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

这就是我们获取值作为 render prop 函数参数的方式。

不应通过 props 传入上下文提供程序的值。您可以了解更多关于 render props here

Answer 2

如果值为 false、null 或未定义，则不会呈现。我在沙箱 here 中尝试了您的代码。刚刚在 header 中添加了 .toString() ，布尔值显示在 header.

中

React Context Provide 不将值传递给消费者

React Context Provide not passing the value to the Consumer

reactjs

react-context