用道具把零件传下去

如果有许多组件应该接收用户上下文,那么它们应该是上下文使用者。这是高阶组件的用例:

const withUser = Comp => props => (
  <AuthConsumer>
    {({ user }) => <Comp user={user} ...props/>}
  </AuthConsumer>
);

Home , Header 和 SearchPanel 应该会增加 withUser(...) 接受 user 这样支撑,例如:

头模块.js

export class Header ... 

export default withUser(Header);

当 Layout

为什么你不在 Layout 组件?:

Home 组成部分:

export default class Home extends React.Component {
  render() {
    return (
      <AuthConsumer>
        {({ user }) => {
          if (!user) {
            return <ErrorPage />;
          }
          return <Layout user={user} />
        }}
      </AuthConsumer>
    );
  }
}

布局

export default function Layout({ user }) {
  return (
    <div css={bodyWrap}>
      <Header appName="Test" user={user} />
      {
        (!user.roles.includes('Admin') && !user.roles.includes('Observer'))
        ? <NoAccessPanel />
        : <SearchPanel user={user}/>
      }
      <Footer />
    </div>
  );
}