Next.js 13 App 目录中 Layout 组件获取数据并传递给 Page 内容

在 Next.js 13 的 App 目录中，你可以在 Layout 组件中获取数据并将其传递给页面组件。以下是一些示例代码，说明如何在 Layout 中获取数据并将其传递给页面：

1. 使用 getInitialProps 方法获取数据：

在 Layout 组件中，可以使用 getInitialProps 方法获取数据，并将其作为 props 传递给页面组件。以下是示例代码：

import React from 'react'
import MyPage from './MyPage'

const Layout = ({ data }) => (
  <div>
    <h1>Layout</h1>
    <MyPage data={data}/>
  </div>
)

Layout.getInitialProps = async () => {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()

  return { data }
}

export default Layout

在这个示例中，Layout 组件从 'https://api.example.com/data' 获取数据，并将其作为 props 传递给 MyPage 组件。MyPage 组件可以像这样访问数据：

import React from 'react'

const MyPage = ({ data }) => (
  <div>
    <h1>My Page</h1>
    <p>{data}</p>
  </div>
)

export default MyPage

2. 使用 Context API 传递数据：

另一种传递数据的方法是使用 React 的 Context API。以下是示例代码：

import React, { createContext, useContext } from 'react'
import MyPage from './MyPage'

const DataContext = createContext()

const Layout = ({ data }) => (
  <DataContext.Provider value={data}>
    <div>
      <h1>Layout</h1>
      <MyPage />
    </div>
  </DataContext.Provider>
)

export default Layout

export const useData = () => useContext(DataContext)

在这个示例中，Layout 组件将数据存储在 DataContext.Provider 中，并使用 useContext hook 在 MyPage 组件中访问数据。以下是 MyPage 组件的示例代码：

import React from 'react'
import { useData } from './Layout'

const MyPage = () => {
  const data = useData()

  return (
    <div>
      <h1>My Page</h1>
      <p>{data}</p>
    </div>
  )
}

export default MyPage

这两种方法都可以在 Layout 组件中获取数据，并将其传递给页面组件。具体选择哪种方法取决于你的偏好和项目的需求。