Next13：子客户端组件修改父客户端组件状态的实现方案

结论：完全可行 #

Next13 中对组件 props 的序列化限制仅针对服务器组件向客户端组件传递 props的场景——因为服务器组件在服务端渲染，需要将 props 序列化后传输到客户端，因此不能传递函数、Symbol 这类不可序列化的值。

但如果是同为客户端组件的父子组件，所有逻辑都在客户端运行，不存在跨环境序列化的需求，直接传递函数（包括 React 的 setState 方法）完全符合规则，和传统 React 组件的通信逻辑一致。

示例代码实现 #

父客户端组件（ParentComponent.tsx）

'use client';

import { useState } from 'react';
import Select from './Select';

export default function ParentComponent() {
  const [selectedValue, setSelectedValue] = useState('');

  return (
    <div>
      <Select value={selectedValue} onChange={setSelectedValue} />
      <p>当前选择：{selectedValue}</p>
    </div>
  );
}

子客户端组件（Select.tsx）

'use client';

interface SelectProps {
  value: string;
  onChange: (value: string) => void;
}

export default function Select({ value, onChange }: SelectProps) {
  return (
    <select 
      value={value} 
      onChange={(e) => onChange(e.target.value)}
    >
      <option value="">请选择</option>
      <option value="option1">选项1</option>
      <option value="option2">选项2</option>
    </select>
  );
}

关于全局上下文的替代方案 #

全局上下文确实可以用来管理跨组件共享的状态，但如果只是父子组件之间的状态传递，直接传递 setState 方法作为 props 是更轻量化、更符合组件设计逻辑的方案，不需要额外引入上下文。

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