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

Question

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;

Run Code Online (Sandbox Code Playgroud)

该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

Run Code Online (Sandbox Code Playgroud)

这似乎在开发中起到了作用...问题是生产后的构建，它在直接登陆页面时有效，但在导航到其他页面时，而不是我期望的类，它要么没有，要么pageClass有只是一个字母pageClass。

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

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

Run Code Online (Sandbox Code Playgroud)

我最初很高兴能在开发中实现这一点，但很快就发现这不是将页面级类传递到布局组件以进行生产的可靠方法。

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

预先感谢您的任何提示！

Answer 1

Sea*_*n W 8

您可以pageClass通过Componentin传递和访问该道具_app。您可以使用此方法将属性从任何页面组件独立传递到 _app。

_应用程序文件

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

Run Code Online (Sandbox Code Playgroud)

布局文件

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

Run Code Online (Sandbox Code Playgroud)

页面文件

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

HomePage.pageClass = 'home_header'

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	4 年，5 月前
查看次数：	3309 次
最近记录：	4 年，5 月前