我想将props传递给Next.js 13的layout.js。它看起来是这样的：
// layout.js
export default Layout({children}) {
return (
<>
{/* I want to render different `text` depending on the page.js I'm rendering */}
<h1>{text}</h1>
{children}
</>
);
}不幸的是，我最终会这样做：
// CustomLayout.js
export default Layout({children, text}) {
return (
<>
{/* I want to have different `text` depending on the Page.js I'm rendering */}
<h1>{text}</h1>
{children}
</>
);
}我的问题是，在Next.js 13中是否可以将props传递给layouts？有更好的方法吗？
// In every page.js
import Layout from "somewhere/CustomLayout";
export default Page() {
return (
<Layout text="My text">
{/* My Page Content */}
</Layout>
);
}
2条答案
按热度按时间slsn1g291#
不，你不应该在nextjs 13 appdir中的layout.js文件中传递额外的props。
正如@YoussoufOumar指出的那样，你不应该自己打电话给布局。它位于根目录（至少对于它下面的所有组件），因此应该被视为根目录。
创建将文本作为 prop 传递的自定义布局的方法是一种合理的方法。
hs1rzwqc2#
你不应该试图将自定义的
props传递给Layout，在Next.js的新app目录中，因为这个组件是由你创建的，但是Next.js本身会通过给它两个props来调用它：子项（必填）
布局组件应接受并使用
children属性。在渲染期间，子项将使用布局正在环绕的管段填充。这些主要是子布局（如果存在）或页面的组件，但也可以是其他特殊文件，如Loading或Error（如果适用）。params（可选）
动态管线参数对象从根管段向下到该布局。
我认为，想要传递自定义
props给它，是因为你想在不同的地方使用它，但整个想法是有一个Layout的路由段。子路由继承外部路由的布局。例如，app/blog中的layout.js被app/中的layout.jsPackage 。在
page.js内部调用Layout，就像使用任何 Package 器一样，但不像Next.js设计的Layout那样具有特定的功能：布局是在多个页面之间共享的UI。在导航时，布局将保留状态，保持交互性，并且不会重新呈现。布局也可以嵌套。
Layout不是全局状态提供程序。为此需要考虑使用已知的技术，例如context。