在Next.js中如何向子组件传递State与Props

针对你提到的场景，有两种常用的实现方式，下面分别说明：

方法一：通过React.cloneElement传递Props #

因为Layout的children是ReactNode，我们可以通过React.cloneElement给子元素注入需要的props。修改后的代码如下：

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

interface LayoutProps {
    children: React.ReactElement; // Next.js页面通常为单个组件，这里限定为Element类型
}

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

    // 克隆子组件并传入todo状态
    const childrenWithProps = cloneElement(children, { todo, setTodo });

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

// 修正原代码类型错误（PageP1rops → Page1Props）
interface Page1Props {
    todo: string;
}

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

interface Page2Props {
    todo: string;
}

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

如果需要处理多个子元素的场景，可改用React.Children.map遍历克隆每个元素。

方法二：使用React Context API #

如果页面内有多层嵌套组件需要访问todo状态，用Context可以避免逐层传递props的麻烦：

1. 创建Todo Context #

// contexts/TodoContext.tsx
import React, { createContext, useContext, useState, ReactNode } from 'react';

interface TodoContextType {
    todo: string;
    setTodo: React.Dispatch<React.SetStateAction<string>>;
}

const TodoContext = createContext<TodoContextType | undefined>(undefined);

export function TodoProvider({ children }: { children: ReactNode }) {
    const [todo, setTodo] = useState("Done");

    return (
        <TodoContext.Provider value={{ todo, setTodo }}>
            {children}
        </TodoContext.Provider>
    );
}

// 自定义Hook简化Context访问
export function useTodo() {
    const context = useContext(TodoContext);
    if (!context) {
        throw new Error('useTodo必须在TodoProvider内部使用');
    }
    return context;
}

2. 在Layout中引入Provider #

import { TodoProvider } from '@/contexts/TodoContext';

interface LayoutProps {
    children: React.ReactNode;
}

export default function Layout({ children }: LayoutProps) {
    return (
        <TodoProvider>
            <main>{children}</main>
        </TodoProvider>
    );
}

3. 在页面组件中获取状态 #

import { useTodo } from '@/contexts/TodoContext';

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

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

这种方式下，任何嵌套的子组件都可以通过useTodo直接获取todo状态和修改方法，无需手动传递props。

内容的提问来源于stack exchange，提问作者TunedSphere