时间戳

首页 > 解决方案 > NextJS 将类从页面传递到布局组件

next.js - NextJS 将类从页面传递到布局组件

问题描述

我正在尝试使用动态英雄图像（由特定于页面的类选择器设置的背景图像。）我的标题在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");
}

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

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

提前感谢您的任何提示！

标签： next.js

解决方案

您可以通过in传递和访问pageClass道具。您可以使用这种方法将道具从任何页面组件独立传递到 _app。Component_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，您需要刷新浏览器以显示更改。

推荐阅读