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

【问题标题】：NextJS pass class from page to layout componentNextJS 将类从页面传递到布局组件
【发布时间】：2021-08-30 19:27:37
【问题描述】：

我正在尝试使用动态英雄图像（由特定于页面的类选择器设置的背景图像。）我的标题在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 组件在 _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 或者它只是 pageClass 的一个字母。

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

.home_header {
  background-image: url("../public/imgs/headers/img_i_want_to_use.jpg");
}

我最初很高兴能在 dev 中使用它，但很快发现这不是将页面级类传递给布局组件以进行生产的可靠方法。

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

提前感谢您的任何提示！

【问题讨论】：

标签： next.js

【解决方案1】：

您可以通过_app 中的Component 传递和访问pageClass 属性。您可以使用这种方法将 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 后，您需要刷新浏览器以显示更改。

【讨论】：