Next.js 13.2：服务器组件如何向客户端组件传递函数Props？

下面是几个在服务器组件页面 + 客户端组件表格的架构下，实现行按钮点击传递数据到页面的可行方法：

方法1：通过 Server Action 传递数据（推荐用于服务器端处理场景） #

这种方式可以直接把行数据传递到服务器端，适合需要后端处理数据的需求：

1. 定义一个 Server Action（可放在单独文件中）：

// actions.ts
'use server';

export async function handleRowSelection(row: YourRowType) {
  // 这里处理行数据，比如写入数据库、更新缓存等
  console.log('选中的行数据:', row);
  // 如果需要让服务器组件后续读取，可将数据存入会话（如cookies）或临时存储
}

2. 在客户端表格组件中导入并调用这个 Action：

'use client';

import { handleRowSelection } from './actions';

export default function Table({ data }: { data: YourRowType[] }) {
  return (
    <table>
      <tbody>
        {data.map(row => (
          <tr key={row.id}>
            <td>
              <button onClick={() => handleRowSelection(row)}>
                选择此行
              </button>
            </td>
            {/* 渲染其他列内容 */}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

3. 服务器组件页面直接引入表格组件即可，点击按钮后数据会通过 Server Action 传递到服务器端，后续服务器组件可通过读取会话/缓存数据来使用该数据。

方法2：通过 URL 查询参数传递数据（适合前端展示场景） #

如果仅需要在页面上展示选中的行数据，可通过URL参数传递：

1. 客户端表格组件点击按钮时，将行的唯一标识（或序列化后的完整数据）拼到URL中：

'use client';

import { useRouter } from 'next/navigation';

export default function Table({ data }: { data: YourRowType[] }) {
  const router = useRouter();

  const onRowClick = (row: YourRowType) => {
    // 推荐传递唯一ID（简洁且无长度限制）
    router.push(`?selectedRowId=${row.id}`);
    // 若需传递完整数据，可序列化后传递（注意URL长度限制）
    // router.push(`?selectedRow=${encodeURIComponent(JSON.stringify(row))}`);
  };

  return (
    <table>
      <tbody>
        {data.map(row => (
          <tr key={row.id}>
            <td>
              <button onClick={() => onRowClick(row)}>选择此行</button>
            </td>
            {/* 渲染其他列内容 */}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

2. 服务器组件页面读取URL参数，匹配对应的行数据并展示：

import Table from './Table';
import { headers } from 'next/headers';
import { parse } from 'url';

export default async function Page() {
  // 获取表格数据源
  const tableData = await fetchTableData();
  
  // 读取URL查询参数
  const headerList = headers();
  const currentUrl = headerList.get('x-url') || '';
  const { query } = parse(currentUrl, true);
  const selectedRowId = query.selectedRowId as string;
  
  // 匹配选中的行数据
  const selectedRow = tableData.find(row => row.id === selectedRowId);

  return (
    <div>
      {selectedRow && (
        <div className="selected-row">
          选中行数据：{JSON.stringify(selectedRow)}
        </div>
      )}
      <Table data={tableData} />
    </div>
  );
}

方法3：客户端存储 + 页面刷新（适合简单前端展示） #

如果不需要服务器端处理数据，仅页面需要读取客户端选中的数据，可结合localStorage和页面刷新实现：

1. 客户端表格组件点击时将行数据存入localStorage并触发页面刷新：

'use client';

import { useRouter } from 'next/navigation';

export default function Table({ data }: { data: YourRowType[] }) {
  const router = useRouter();

  const onRowClick = (row: YourRowType) => {
    localStorage.setItem('selectedRow', JSON.stringify(row));
    router.refresh(); // 触发服务器组件重新渲染
  };

  return (
    <table>
      <tbody>
        {data.map(row => (
          <tr key={row.id}>
            <td>
              <button onClick={() => onRowClick(row)}>选择此行</button>
            </td>
            {/* 渲染其他列内容 */}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

2. 新增一个客户端组件用于读取并展示选中的数据：

'use client';

import { useEffect, useState } from 'react';

export default function SelectedRowDisplay() {
  const [selectedRow, setSelectedRow] = useState<YourRowType | null>(null);

  useEffect(() => {
    const storedRow = localStorage.getItem('selectedRow');
    if (storedRow) {
      setSelectedRow(JSON.parse(storedRow));
    }
  }, []);

  return selectedRow ? (
    <div>选中行数据：{JSON.stringify(selectedRow)}</div>
  ) : null;
}

3. 服务器组件页面引入表格和展示组件：

import Table from './Table';
import SelectedRowDisplay from './SelectedRowDisplay';

export default async function Page() {
  const tableData = await fetchTableData();

  return (
    <div>
      <SelectedRowDisplay />
      <Table data={tableData} />
    </div>
  );
}

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