在nextjs，我如何传递postData到我的布局?

Question

我如何给布局组件postData?在我的例子中，我希望我的布局(ArticleStyle2)获得postData和填充自己的数据。不确定这是否是最佳实践或其他什么，所以开放的建议，相当新的nextJs和反应。

[id] . js:

export default function Post({ postData }) {
return (
<div>
{ postData.themeOne ? (
<ArticleStyle2 {...postData}>
........

articleStyle2:

export default function ArticleStyle2({ children, props }) {
return (

<div>
<main>{children}</main>
</div>


)
}

Answer 1

给定函数签名ArticleStyle2({ children, props })，您将像这样将props传递到布局组件中:

[id] . js

<ArticleStyle2 props={postData}>...</ArticleStyle2>

然后你可以像这样在你的布局中使用它们:

ArticleStyle2.jsx

<p>{props.themeOne}</p>

https://codesandbox.io/s/wizardly-mendel-c8hbtz