如何在 NextJS、Reactjs 中將道具傳遞給 {props.children}

Question

我有一個問題將道具從父組件傳遞到我的子組件，好的，讓我們看看下面的代碼

import { useState } from "react";
import { createGlobalStyle } from "styled-components";
import Footer from "./Footer";
import Nav from "./Nav";

const GlobalStyle: any = createGlobalStyle`
    body {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        font-family: 'Comic sans MS'
    }
`;

export default function Layout(props) {
    let [pages, setPages] = useState(null) //1. the props i want to pass
    const Children = props.children
    return (
        <>
            <GlobalStyle />
            <Nav />
            {Children} {/*2.the target*/}
            <Footer />
        </>
    )
}

上面的代碼保存為 Layout.tsx，我想將let [pages, setPages] = useState(null)傳遞給{Children} 。 我在下面的 _app.tsx 中調用 Layout 組件

import Router from 'next/router';
import Layout from '../components/Layout';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

Router.events.on('routeChangeStart', () => NProgress.start());
Router.events.on('routeChangeComplete', () => NProgress.done());
Router.events.on('routeChangeError', () => NProgress.done());

export default function MyApp({ Component, pageProps }) {
    return (
        <Layout>
            <Component {...pageProps} />
        </Layout>
    )
}

目標子項是我的名為 index.tsx 的索引頁，我找不到將道具傳遞給它的方法，下面是我的目錄樹

|- components
|  |- Layout.tsx
|
|- pages
|  |- _app.tsx
|  |- index.tsx

也許有人可以在這里幫助我的問題，謝謝

Answer 1

最后，我在 _app.tsx 上創建_app.tsx並將其傳遞給index.tsx和layout.tsx ，這樣我就可以訪問兩者的值。