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

我正在尝试使用动态英雄图像(由页面特定类选择器设置的背景图像。) 我的 header 位于 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

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

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

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

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

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

提前感谢您的任何提示!

最佳答案

您可以通过 _app 中的 Component 传递和访问 pageClass 属性。您可以使用这种方法独立地将 props 从任何页面组件传递到 _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 后，您需要刷新浏览器以显示更改。

https://stackoverflow.com/questions/67977892/

xml - 同时迭代两个 for-each 循环

sql - 有没有一种方法可以不使用 FOR 循环来创建虚拟记录？

numpy - XGBoost:检查失败:有效:输入数据包含 `inf` 或 `nan`

scala - 推特 future 封锁

ruby - 如何在 ruby 中编写一个采用散列样式、方括号参数的方法，例如 mymethod

c++ - std::sort 中用 lambda 函数指定的比较函数是否返回 bool 类型？

javascript - Target 的 Toggled ClassList 上的 CSS Tra

awk - 使用 awk 和 gsub 用字符串替换 CSV 的列

Flutter - 墨水池 : Why does onHover() require onTap()