Передача реквизита в HOC в машинописи - PullRequest
Новая
       22

Передача реквизита в HOC в машинописи

1 голос
/ 26 сентября 2019

У меня есть разметка HOC, вызов "withLayout" 

interface WithLayoutProps {
  isHomePage?: boolean;
}

const withLayout = <P extends object>(Component: ComponentType<P>) => (
  props: P & WithLayoutProps,
): ReactElement => {

  return (
    <div>
      {!!isHomePage?<Header1 />:<Header2 />} //How the home page pass the "isHomePage" to there?
      <main>
        <Component {...props} />
      </main>
    </div>
  );
};

export default withLayout;

Вся страница является макетом с этим компонентом 

const Home: NextPage = withLayout(() => {

  return (
    <div>home</div>
  )
})

Но на домашней странице нам нужен другой заголовок, такой как<Header1 /> И другие страницы использования

Как я могу передать реквизиты isHomePage withlayout?

1 Ответ

3 голосов
/ 26 сентября 2019

Как я могу передать реквизиты isHomePage в inlayout?

Просто добавьте isHomePage в качестве дополнительного аргумента в HOC.

withLayout по-прежнемуобычная функция, так что вы можете иметь больше или меньше аргументов (при необходимости). 

const withLayout = <P extends object>(
  Component: ComponentType<P>,
  isHomePage: boolean = true // extra argument with default value
) => (
  props: P & WithLayoutProps,
): ReactElement => {...};

// usage:
const Home: NextPage = withLayout(
  () => (<div>home</div>)
})

const AboutUs: NextPage = withLayout(
  () => (<div>About Us</div>),
  false // not home page
)
...