点击函数写在客户端文件里

报错写的是：事件处理函数不能当作 props 传给客户端组件。按钮上的 onClick={function onClick} 就是那一次传递。服务端组件在服务器上渲染，函数传不过去。把 onClick 写进带 'use client' 的文件里，由那个文件自己创建函数，这条报错才会消失。

从服务器传函数仍然是同一种错

对话里的改法是新建 InteractiveButton，文件第一行 'use client'，组件接收 onClick、className、children，再渲染 <button onClick={onClick}>。服务器组件里再写：

<InteractiveButton
  onClick={() => console.log('Button clicked!')}
  className="some-class"
>
  Click me
</InteractiveButton>

按钮本身到了客户端，但这个箭头函数仍然写在服务器组件里，作为 props 传下去。报错针对的就是这种传递。'use client' 只标记接收函数的那个文件，不能把服务器上创建的函数变成可以序列化的值。函数要在客户端文件内部创建，或者把点击之后要做的事写成那个客户端组件自己的方法。

服务器组件可以渲染客户端组件，把字符串、数字这类可序列化的 props 传进去，例如标题和 class 名。不要传函数、不要传类实例。children 若只是文本，可以留在服务器那边作为子节点。

指令写在文件顶上，不是写在函数中间

'use client' 是文件级指令，放在第一行。同一个文件里的组件都会进客户端包。为了一个按钮把整页标成客户端，页面上本来可以留在服务器的取数也会跟着进包。对话里的建议是只把有交互的那一块拆出去，其余继续放在没有这行指令的文件里。

服务器组件不会把自身的 JavaScript 发到浏览器，所以没有地方挂 onClick。客户端组件会进包，才能在浏览器里跑事件。混合的方式是服务器组件负责结构和数据，叶子上的按钮放在客户端文件。不要在服务器文件里写 'use client' 又在里面 await 数据库，两种职责会缠在一个文件里，指令的边界就看不清了。

报错文本里已经写了：需要交互时，把这一部分改成客户端组件。它没有说把处理函数从服务器传进客户端组件。按字面把函数继续当 prop，只是把报错从 <button> 挪到 <InteractiveButton> 上。

点击之后的数据从参数来，不从闭包来

按钮若要根据文章 id 做点赞，把 id 当成字符串 prop 传进客户端组件，在那个文件里写 onClick。id 可以序列化。不要在服务器组件里写成闭包去捕获服务器上的查询结果再传函数。查询结果要给按钮用，就先在服务器上取好，把用得到的字段当成普通 props 传下去。

console.log 放在客户端函数里，输出在浏览器控制台。放在服务器组件的渲染过程里，输出在跑服务器的终端。两边都叫 console.log，不是同一个地方。样本里的点击日志只有在函数真正于浏览器执行时才能看见。

类名可以继续由服务器传入，它是字符串。交互逻辑不要跟类名绑在同一个函数 prop 上。样式用 className，行为写在客户端文件内部，两边都不需要把函数传来传去。

按报错里的组件边界拆文件

报错点名的是按钮上的 onClick，以及“若需要交互，把这一部分改成客户端组件”。拆分时新建一个只放按钮的文件，第一行 'use client'。按钮的点击函数写在这个文件里面，不写成从外面传进来的参数。服务器文件导入这个按钮，传入的是 className 这种字符串，子节点是文本 Click me。保存之后再渲染，报错应消失。若报错改口到 InteractiveButton 的 onClick 参数上，说明箭头函数仍在服务器文件里。把 console.log 挪进客户端文件，服务器文件里不再出现函数字面量。

服务器文件不要加 'use client'。加了之后整份文件进客户端包，原来能在服务器上直接取的数据也得改道。对话把这一点说成尽量把交互限制在一小块。一个按钮对应一个客户端文件就够。页头、列表、静态说明留在服务器文件。

'use client' 写在函数中间是无效的位置。它必须在文件最顶上，导入之前。写在组件内部，打包器不会把这个文件当成客户端入口，按钮上的事件仍然过不了服务器边界。

点击日志出现在浏览器里，才说明函数在客户端执行。只在跑服务器的终端里看见日志，说明代码还在服务器组件的渲染过程中。两处控制台不是同一个输出。样本的字符串是 Button clicked!，用它来区分，避免和别的日志混在一起。

可传入的值是字符串、数字、布尔和纯文本子节点。文章 id 若要参与点击，作为字符串 prop。不要把服务器上查到的整个对象塞进闭包再试图传函数。对象里若有方法，一样传不过去。先在服务器上取出 id，再交给客户端文件。

函数留在创建它的那一侧

服务端组件不挂事件。客户端文件顶上写 'use client'，在这个文件里创建 onClick。服务器只传入字符串、数字和文本子节点。把在服务器上写的箭头函数传给客户端按钮，报错还在，只是换了组件名。一个按钮不要把整页都标成客户端。

验收时看报错是否还在，以及日志出现在哪。函数若仍由服务器文件写成箭头函数再传入，报错会从 button 挪到 InteractiveButton。把 console.log('Button clicked!') 写在客户端文件内部之后，点击输出在浏览器控制台，服务器终端不再出现这句。className 仍由服务器以字符串传入，样本值是 some-class。子节点文本是 Click me。文章 id 若需要，作为字符串传入，不放进闭包。指令只在客户端文件第一行。服务器文件保持没有这行指令，列表和静态内容留在那边。一个按钮一个客户端文件，不要把整页标成客户端来消掉这一条报错。

再看一次边界上什么能过、什么不能过。字符串类名和按钮上的文字可以从服务器文件传进来。函数不行，哪怕接收它的子组件已经标成客户端。指令必须写在那个客户端文件的第一行，写在函数体里等于没写。点击之后的那句日志应以浏览器控制台为准。服务器终端里出现同样的句子，说明函数仍在服务器上执行。报错若从按钮换成你新建的那个组件名，就把箭头函数挪进客户端文件，服务器文件里不再写函数字面量。列表和说明留在没有指令的文件里。不要为了消掉一条事件报错，把整页都送进客户端的脚本包。