如何在NextJs中的layout.js中使用的子组件页面之外的其他组件中接收 prop 13

ibps3vxo 于 2023-06-05 发布在其他

关注(0)|答案(1)|浏览(125)

我试图生成静态参数，用于在所有组件中翻译next js中的语言，并且我能够在所有子页面中接收语言参数作为 prop ，但不在布局中定义的组件中。在我例子中，即SideComponent
有关更多信息，请参阅此文档https://locize.com/blog/next-13-app-dir-i18n/
app/[lng]/Layout.js

import { dir } from 'i18next'
import { languages } from '../i18n/settings'
import SideComponent from "../../comp/component"

export async function generateStaticParams() {
  return languages.map((lng) => ({ lng }))
}

export default function RootLayout({
  children,
  params: {
    lng
  }
}) {
  return (
    <html lang={lng} dir={dir(lng)}>
      <head />
      <body style={{display:"flex"}}>
        <SideComponent />
        {children}
      </body>
    </html>
  )
}

comp/component.js

import React from 'react'

export default async function SideComponent ({ params: { lng } }) {
    const { t } = await useTranslation(lng, 'second-page')
  return (
    <div>
      Hello sidebar
      {t('back-to-home')}
    </div>
  )
}

app/[lng]/second-page/page.jsx

import Link from 'next/link'

export default function Page({ params: { lng } }) {
  return (
    <>
      <h1>Hi from second page!</h1>
      <Link href={`/${lng}`}>
        back
      </Link>
    </>
  )
}

我在我的真实的项目中有一个侧边栏组件，它也是以这样的方式在layout.js中定义的，因此它保留在所有页面中，但我不能在该组件中放置翻译。请帮帮我

next.js

来源：https://stackoverflow.com/questions/76357336/how-to-receive-props-in-another-components-other-than-children-components-pages

1条答案

按热度按时间

yks3o0rb1#

简单地说，您可以从布局中传递语言作为 prop

export default function RootLayout({
  children,
  params: {
    lng
  }
}) {
  return (
    <html lang={lng} dir={dir(lng)}>
      <head />
      <body style={{display:"flex"}}>
        <SideComponent lng={lng} />
        {children}
      </body>
    </html>
  )
}

export default async function SideComponent ({ lng }) {
    const { t } = await useTranslation(lng, 'second-page')
  return (
    <div>
      Hello sidebar
      {t('back-to-home')}
    </div>
  )
}

赞(0）回复(0）举报 2023-06-05

我来回答

如何在NextJs中的layout.js中使用的子组件页面之外的其他组件中接收 prop 13

1条答案

相关问题

热门标签

最新问答