错误：函数无法直接传递给客户端组件，除非您通过使用“使用服务器”标记来显式公开它

在 Next.js 中收到此错误消息，但不知道该如何处理。 Next.js 版本 13.0.5。

我将一个 prop 传递给 Next.js 中的客户端组件。 Prop 是对象列表，其中一个值是一个函数。但问题是，这个错误信息意味着什么？

错误：函数无法直接传递给客户端组件，除非您通过使用“使用服务器”标记来显式公开它

如何通过用“使用服务器”标记来公开函数？

matchesColumns.push({ field: 'pk', headerName: "", flex: 0.3, renderCell: (params, event) => (<Link href={`/matches/${encodeURIComponent(params.row.pk)}`}>Details</Link>) });
(...)
{<Tabela2 rows={matchesRows} columns={matchesColumns}/>}

这是 Next.js 即将推出的一项新功能，称为服务器操作。

您可以使用服务器操作来传递异步函数server to client组件，同时仍然可以从客户端调用它们。

这是一个例子：

// page.tsx

"use server";

import { ClientComponent } from './ClientComponent.tsx';

async function deleteItem(itemId: string) {
  "use server"; // mark function as a server action (fixes the error)

  // TODO add item deletion logic
  return null;
}

export function Page() {
  return <ClientComponent deleteItem={deleteItem} />
}

// ClientComponent.tsx

export function ClientComponent({ deleteItem }) {
  return (
    <button onClick={async () => {
      await deleteItem("foobar");
      alert("item has been deleted");
    }}>
      delete item
    </button>
  );
}