Question

我正在尝试使用动态英雄图像（由页面特定类选择器设置的背景图像。）我的标题位于 2021-05-31T19:52:08.000000Z 组件中。

layout

function Layout({children}) { const pageName = children[1].type.name; const pageClass = pageName.charAt(0).toLowerCase() + pageName.slice(1); return ( <Fragment> <EmergencyBanner /> <MainHeader pageClass={pageClass} /> <MainNav /> {children} <MainFooter /> </Fragment> ); } export default Layout; 组件在 layout 中调用，{1}} 是网站的入口点，因此它包装了每个页面。

_app.js

这似乎在开发中解决了问题...问题是生产后构建，它在直接登陆页面时有效，但是当导航到其他页面时，而不是我期望的类，它要么没有function MySite({ Component, pageProps }) { return ( <Layout> <Head> <title>Title of My Site</title> <link rel="icon" href="/favicon.png" /> </Head> <Component {...pageProps} /> </Layout> ) } export default MySite 或者它只是 pageClass 的单个字母。

处理特定页面背景图像的 css：

pageClass

我最初很想在开发中使用它，但很快发现这不是将页面级类传递给用于生产的布局组件的可靠方法。

我真的不想将标题（然后还有导航，因为它在它下面）从布局移动到每个页面。必须有更好的方法。

预先感谢您提供任何提示！

Answer 1

您可以通过 pageClass 中的 Component 传递和访问 _app 道具。您可以使用这种方法独立地将 props 从任何页面组件传递到 _app。

_app 文件

function MySite({ Component, pageProps }) {
  return (
    <Layout pageClass={Component.pageClass}>
      <Component {...pageProps} />
    </Layout>
  )
}

布局文件

function Layout({children, pageClass}) {
  return (
    <>
      <MainHeader pageClass={pageClass} />
      {children}
    </>
  );
}

页面文件

function HomePage() {
  return <>Home</>;
}

HomePage.pageClass = 'home_header'

设置或更改 pageClass 后，您需要刷新浏览器以显示更改。

NextJS 将类从页面传递到布局组件

1 个答案: