我读到我只能在页面区域使用getStatisticProps，但是我可以使用来自组件的模板吗?
我想从pages/index.js发送日期
export default function Home({posts}) {
return (
<div>
<Head>
<title>NextJs is so cool</title>
<meta
name="description"
content="my new wonderful page"
/>
<link rel="icon" href="/favicon.ico" />
</Head>
<CustomComponents data={posts}/>
</div>
);
}
export async function getStaticProps(context) {
const res = await fetch('https://example.com/wp-json/wp/v2/posts')
const posts = await res.json()
return {
props: {
posts,
},
}
}
到CustomComponents.js，并从那里到blog部分:
const CustomComponents = ({posts}) => {
return (
<div>
...
<BlogComponent data={posts} />
</div>
);
};
export default CustomComponents;
，但有一个错误，当我使用这个日期在集团部分- posts.title。渲染[0]不存在…
const BlogComponent = ({posts}) => {
{posts.title.rendered}
);
};
export default BlogComponent;
哪里出错了?还是根本不可能?
您将其传递为data={posts}
export default function Home({posts}) {
return (
<div>
<Head>
<title>NextJs is so cool</title>
<meta
name="description"
content="my new wonderful page"
/>
<link rel="icon" href="/favicon.ico" />
</Head>
// You pass posts to child component as name data
<CustomComponents data={posts}/>
</div>
);
}
// Child.jsx
const CustomComponents = ({data}) => {
return (
<div>
// rest of you code
<BlogComponent data={data} />
</div>
);
};
export default CustomComponents;
如果你想传递道具到嵌套的组件树(道具钻取)，你可以使用上下文API来使它更容易。