将事件从客户端组件传递到服务器组件来处理它

Question

我目前正在努力理解通过 props 将函数传递给客户端组件然后处理响应的原理。

我使用的是 Next.js 13.5.2

我的服务器组件：

...
import FilterButtons from "./components/FilterButtons";
...
 <FilterButtons
        productTypes={productTypes}
        handleClick={filterProductsByType}
      ></FilterButtons>
...

我的客户端组件

FilterButtons

type Props = {
  productTypes: ProductType[];
  handleClick: (event: any) => void;
};

export default function FilterButtons({ productTypes, handleClick }: Props) {
  return (
    <ButtonGroup className="ml-5">
      {productTypes.map((type: ProductType) => (
        <Button
          className={"transition ease-in hover:scale-105"}
          key={type.id}
          size="sm"
          onClick={handleClick}
        >
          {type.name}
        </Button>
      ))}
    </ButtonGroup>
  );
}

我将

ButtonGroup

移至单独的客户端组件，因为不可能响应服务器组件内部的事件。我明白了。

但上面的代码仍然返回给我：

错误：函数不能直接传递给客户端组件，除非您通过使用“使用服务器”标记来显式公开它。 <... productTypes={[...]} handleClick={function}>

错误消息让我感到困惑。将我的服务器组件显式标记为

"use server";

不会改变任何内容。另外，我找不到任何解释为什么这不起作用。

Answer 1

您无法将数据从客户端组件直接传递到服务器组件。因为客户端组件将在服务器和客户端上呈现。话虽这么说，如果您尝试将数据从客户端组件传递到服务器组件，则当客户端组件在浏览器上呈现时，它们之间没有直接的桥梁。所以你需要一个 API 来在它们之间架起桥梁。

但是，在 Next 13 中有一个更简单的解决方案，称为“服务器操作”。您可以创建将在服务器上运行但可以在客户端上调用的函数。这是其中的一个示例：

// src/my-actions/createPost.js
'use server'
 
export async function createPost() {
  // ...
}

// src/components/my-form.js
'use client'
 
import { createPost } from './../my-actions/createPost.js'
 
export default function ClientComponent() {
  return (
    <form action={createPost}>
      <button type="submit">Create Post</button>
    </form>
  )
}

请注意，服务器操作目前处于测试阶段（NextJS v13.5）并且有一些限制。您可以阅读该文档以获取完整信息