Question

我的主要Home组件根据条件呈现不同的内容。

我需要<SearchPanel />组件通过user作为道具，但我还需要user组件中的Layout数据。

此代码可以正常工作，但我认为两次发送user作为道具是不正确的。我该如何更改？

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

Layout组件：

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

Answer 1

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

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

Home，Header和SearchPanel应该使用withUser(...)进行扩充，并以这种方式接收user的道具，例如：

header-module.js

export class Header ... 

export default withUser(Header);

Layout本身并不使用用户上下文，也不需要接收它。

Answer 2

为什么不在sumOfCm组件中进行测试？：

sumOfCm.value组件：

Layout

Home组件：

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

传递带有道具的组件

2 个答案: