如何將道具傳遞給 next.js 中的繼承組件

Question

我有以下 index.js 頁面，它使用了一個布局組件：

import Layout from "../components/layout";

export default function Home({posts}) {
  console.log(posts)

  return (
      <Layout posts={posts}>
        <div className="showmore" data-total="total">
              test
          
        </div>

      </Layout>
  )
}

export async function getServerSideProps() {
    const res = await fetch('http://gsr2.localhost.xip.io/api/news')
    const posts = await res.json()

    return {
        props: {
            posts,
        },
    }
}

如何獲取布局中的帖子，以便在另一個組件中使用？

這是我的布局，但我只得到children而不是其他任何東西。

export default function Layout({children, props}) {
    console.log(children, props);
    return (
        <>
            <Head/>
            <main>{children}</main>
            <News>{props}</News
            <Footer/>
        </>
    )
}

Answer 1

這里有一個誤解，當您嘗試訪問布局中的子項和道具時，您是在嘗試獲取將傳遞給組件的屬性道具。

相反，你應該做

（{孩子，帖子}）

在那里您應該能夠訪問帖子。