将状态和道具从父级传递给{children}

Question

如何在 NextJs 中使用 React 将 states 属性传递给 {children}
具有 {children} 的布局，子级是多个页面，其中的组件需要布局中的待办事项状态。

import React, { useState } from 'react';

interface LayoutProps {
    children: React.ReactNode;
}

export default function Layout({ children }: LayoutProps) {
    const [todo, setTodo] = useState("Done");

    return (
        <main>{children}</main>
    );
}

interface Page1Props {
    todo: string;
}

export function Page1({ todo }: PageP1rops) {
    return (
        <>
            <Component1 src={todo} />
        </>
    );
}

    interface Page2Props {
    todo: string;
}

export function Page2({ todo }: Page2Props) {
    return (
        <>
            <Component2 src={todo} />
        </>
    );
}

Answer 1

父级退货声明内

 return(
    <Page1 todo={todo}/>
    <Page2 todo={todo}/>
    )