Reactjs 将props 传递给 NextJS 布局组件

发布于03月06日

我将布局组件导入到_app.js文件中:

Layout.js:

const Layout = ({ children, webName, pageTitle }) => {
  return (
    <div>
      <Head>
        <meta charSet='utf-8' />
        <meta
          name='viewport'
          content='width=device-width, initial-scale=1, shrink-to-fit=no'
        />
        <meta name='description' content='' />
        <meta name='author' content='Chris Achinga -> chrisdevcode.xyz' />
        <title>Feet Of Colors Foundation</title>
      </Head>
      <PageHeader webName={webName} pageTitle={pageTitle} />
      <NavBar webName={webName} />
      <main>{children}</main>
      <Footer />
    </div>
  )
}

export default Layout

_app.js:

import Layout from '@/layout/Layout'
import '@/styles/globals.css'

export default function App({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

我有不同的页面，我希望将不同的值传递给WebName和pageTitleprops ，而不是在每个文件中使用Layout组件.

我怎样才能做到这一点？

推荐答案

您可以使用getServerSideProps将数据传递给您的Layout
getServerSideProps返回的数据将作为props 传递给页面.同样的props 在_app.js中是可以访问的，所以你可以将它传递给布局.

export default function MyApp({ Component, pageProps }) {
  return (
    // here you pass the pageProps to the layout
    <Layout pageProps={pageProps}>
      <Component {...pageProps} />
    </Layout>
  );
}

在您的Layout组件中:

export default function Layout({ pageProps, children }) {
  console.log(pageProps); // see pageProps here
  return (
    <>
      <main>{children}</main>
    </>
  );
}

最后在您的页面中:

export async function getServerSideProps() {
  return {
    props: {
      webName: "name",
      pageTitle: "title"
    },
  };
}

Reactjs相关问答推荐

如何等待我的插入内容提交后再继续执行指令？

从另一个组件更改组件中const的状态

为什么登录错误和密码在创建Reaction-Hook-Form后立即被删除？

导致useState中断的中断模式

在React Create App TS项目中安装material UI

react 挂钩-使用有效澄清

如何修复ReferenceError：在构建过程中未定义导航器

我从 S3 存储桶下载图像时收到错误

如何在一个 Next.js 项目中使用两种布局？

在 golang 服务器中刷新或直接 url 路径时响应 404

无法在react 中向表中添加行

无法设置 null 的属性(设置src)

基于标记名的博客详细信息分组没有发生

使用 react-markdown 组件时 Tailwind CSS 的问题

如何使用 React 更改 Material UI 中 ButtonGroup 的 colored颜色？

顶点图表甜甜圈项目边框半径

如何在 nextjs 中单击按钮时动态导入和渲染组件？

如何使用 React Hook Form 将寄存器作为 props 发送到子组件来收集数据？

当我在其中传递 2 个箭头函数时，为什么我的 onClick 事件不适用于 useState

将鼠标悬停在仅适用于该类的第一个实例的 p5.js 类上

实用课程推荐