Reactjs 用道具传递组件

我的主

Home

组件根据条件呈现不同的内容

我需要

组件作为道具传递

用户

，但我还需要

布局

组件中的

用户

数据

这段代码运行良好，但我认为将

用户作为道具发送两次是不正确的。
我怎样才能改变这一点

export default class Home extends React.Component {
  render() {
    return (
      <AuthConsumer>
        {({ user }) => {
          if (!user) {
            return <ErrorPage />;
          }
          if (!user.roles.includes('Admin') && !user.roles.includes('Observer')) {
            return <Layout pageContent={<NoAccessPanel />} user={user} />;
          }
          return <Layout pageContent={<SearchPanel user={user}/>} user={user} />; //not sure about this
        }}
      </AuthConsumer>
    );
  }
}

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

export default function Layout({ pageContent, user }) {
  return (
    <div css={bodyWrap}>
      <Header appName="Test" user={user} />
      {pageContent}
      <Footer />
    </div>
  );
}

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

而
Layout
不使用用户上下文本身，也不需要接收它。
为什么不在
Layout
组件中进行测试

Home
组件：

导出默认类Home.Component{
render（）{
返回(
{（{user}）=>{
如果（！用户）{
返回；
}
返回
}}
);
}
}

布局
组件：

导出默认函数布局（{user}）{
返回(
{
（！user.roles.includes（'Admin'）&&！user.roles.includes（'Observer'））
? 
: 
}
);
}
谢谢你的回答，请你再解释一下，我不太明白。谢谢。我补充了一些解释。我不知道它应该有多深。如果你不知道Hoc模式，首先考虑检查。你能显示布局的代码吗？@ JDC91，代码< >版式< /代码>是问题。为什么你认为把用户发送两次是错误的？
export class Header ... 

export default withUser(Header);