Next.js 14：如何将Server Component的值传递给父Client Component并存储

核心原理 #

Server Component仅在服务器端执行，无法直接访问客户端状态或接收客户端回调函数。因此需要将交互逻辑与数据获取逻辑拆分：Server Component负责获取并提供数据，将需要交互的UI元素封装为独立的Client Component，由后者处理事件并将值传递给父级Client Component。

具体实现步骤 #

1. 封装独立的下拉框Client组件

创建DropdownClient.js，专门处理下拉框的交互逻辑：

'use client';

export default function DropdownClient({ options, onOptionChange }) {
  return (
    <select 
      name="myDropdown" 
      onChange={(e) => onOptionChange(e.target.value)}
    >
      <option value="">--Choose--</option>
      {options.map((option) => (
        <option key={option.id} value={option.id}>
          {option.nombre}
        </option>
      ))}
    </select>
  );
}

2. 修改Server Component，专注数据获取与渲染框架

更新ServerComponent.js，仅负责获取选项数据，然后渲染封装好的下拉框Client组件：

import { fetchOptions } from "@/app/lib/data";
import DropdownClient from './DropdownClient';

export default async function ServerComponent({ onOptionChange }) {
  const options = await fetchOptions('');

  return (
    <main>
      <div>
        <h2>Dropdown</h2>
        <DropdownClient options={options} onOptionChange={onOptionChange} />
      </div>
    </main>
  );
}

3. 父级Client Component接收并存储选中值

修改ClientComponent.js，传入回调函数接收选中值并更新自身状态：

'use client';

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

export default function ClientComponent({ params }) {
  const [selectedOption, setSelectedOption] = useState('');

  const handleOptionChange = (value) => {
    setSelectedOption(value);
    // 这里可以添加其他处理逻辑
    console.log('选中的选项ID：', value);
  };

  return (
    <main>
      <ServerComponent onOptionChange={handleOptionChange} />
      {/* 可选：展示当前选中值 */}
      {selectedOption && <p>当前选中：{selectedOption}</p>}
    </main>
  );
}

关键说明 #

• Server Component的核心职责是数据获取与静态内容渲染，避免在其中编写客户端交互代码。
• 所有涉及浏览器事件（如onChange）、客户端状态的逻辑必须放在标注'use client'的组件中。
• 通过props传递回调函数的方式，实现Client Component ← 子Client Component ← Server Component的数据流，符合React的单向数据流原则。

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