Next.js 13 Layout 组件获取数据并传递给 Page 组件

在 Next.js 13 中，可以通过 Layout 组件获取数据，并将数据传递给 Page 组件。下面是一个例子：

Layout 组件:

import React, { useEffect, useState } from 'react';

const Layout = ({ children }) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 获取数据的异步函数
    const fetchData = async () => {
      const response = await fetch('https://example.com/api/data');
      const json = await response.json();
      setData(json);
    };

    fetchData();
  }, []);

  return (
    <div>
      <header>Header</header>
      <main>{children(data)}</main>
      <footer>Footer</footer>
    </div>
  );
};

export default Layout;

Page 组件:

import Layout from '../components/Layout';

const Page = ({ data }) => {
  return (
    <Layout>
      {(data) => (
        <div>
          <h1>Page</h1>
          <p>{data && data.message}</p>
        </div>
      )}
    </Layout>
  );
};

export default Page;

在 Page 组件中，通过将一个函数作为 children 传递给 Layout 组件，可以在 Layout 组件中获取数据，并将数据作为参数传递给该函数。在这个例子中，Layout 组件获取了一个包含 message 属性的 JSON 对象，并将其作为参数传递给 Page 组件中的函数。在函数中，我们可以使用这个数据来渲染页面。