NextJS 13从布局中访问子 prop

8cdiaqws 于 2023-08-04 发布在其他

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

我把我的博客切换到NextJS 13，使用新的文件夹结构，所以从_app.js和_document.js移动到单一的layout.js，并希望从父根布局访问儿童的数据

export default function RootLayout({ children }) {  
    const { title, description } = children.props
    console.log(children.props)
    return <>
        <html lang="en">
            <head>
                <title>{title}</title>
            </head>
            <body>
                {children}
            </body>
        </html>
    </>
}

字符串
但是，在控制台我看到：“undefined”。
有没有一种方法可以访问儿童的数据，而无需在NextJS 13的布局和页面中获取它。

next.js

来源：https://stackoverflow.com/questions/74306762/nextjs-13-access-children-props-from-layout

1条答案

按热度按时间

jtjikinw1#

在Next.js 13中，新的基于文件的布局路由系统不允许您直接访问布局中的子组件的props。这是因为布局默认情况下是一个服务器组件，它不能访问其子级的props。
但是，您可以使用Next.js中内置的SEO支持来管理HTML元素，如和标签。下面是app/layout.tsx中的一个例子：

import { Metadata } from 'next'

export const metadata: Metadata = { title: 'Home', description: 'Welcome to Next.js', }

export const metadata = { title: 'Home', description: 'Welcome to Next.js', }

字符串
在本例中，Metadata对象用于定义HTML文档的标题和描述。此元数据可以在每个页面或布局中定义，并将应用于HTML文档的。
如果需要在布局和页面之间共享数据，则可能需要在更高级别获取数据，并将其作为props传递给布局和页面。或者，您可以使用Redux或Zustand这样的状态管理库在组件之间共享状态。

赞(0）回复(0）举报 2023-08-04

我来回答

NextJS 13从布局中访问子 prop

1条答案

相关问题

热门标签

最新问答