Astro 传给 React island 的 onClick 变成 null

在 .astro 文件中给 React 组件传 onClick={() => ...}，组件也加了 client:load。服务端日志能看到函数，浏览器却看到 null，按钮没有反应。问题发生在服务端到浏览器的 props 传输：Astro frontmatter 中的函数无法作为可执行闭包序列化到客户端。

Astro 7.3.2 的这种表现是函数 prop 在传输后变成 null；不同版本可能有不同提示。即使序列化诊断改善，也不能依靠升级把任意服务端函数直接搬进浏览器。

把点击处理放在 React 组件内

由 .astro 传递可序列化的数据，让 React 的客户端代码创建事件函数。以下需要项目已配置匹配版本的 React integration：

---
import ActionButton from '../components/ActionButton.jsx';
---

<ActionButton client:load label="记录点击" />

对应 src/components/ActionButton.jsx：

export default function ActionButton({ label }) {
  function handleClick() {
    console.log('clicked');
  }

  return <button type="button" onClick={handleClick}>{label}</button>;
}

这里的日志仅说明客户端事件入口，实际业务动作仍需实现。client:load 决定组件 JavaScript 的加载与 hydration 时机，不会自动把 Astro 的服务器函数变成客户端函数。

共享交互放进同一客户端组件树

如果父组件需要控制按钮、状态和回调，可由一个 React island 作为交互入口，在它的 React 组件树内部向子组件传函数。函数留在同一个客户端运行环境中，不再跨越 Astro 服务端 props 序列化边界。

两个分别 hydration 的 island 不会因为在 .astro 页面中相邻，就自动共享同一个 React 父组件或闭包。需要共享状态时，要按页面结构设计明确的客户端状态与通信，不把同一个服务器函数传给两个 island 当作桥梁。

服务端动作需要另一个调用接口

读取私有数据、写数据库等操作应留在服务端，通过受控 endpoint 或适用版本的 Astro Actions 调用。客户端事件负责发起请求，服务端仍负责输入校验、身份与权限判断，以及业务需要的幂等。不能把服务器函数转成字符串后 eval，也不能把其中的密钥随 props 发送给浏览器。

只读字符串、数字或 Astro 支持的其他可序列化值可以作为 props；复杂对象则要按该版本的支持范围核对，不应把所有对象都宣布为可传输。

验收时完整加载页面，等组件 hydration 后触发按钮，确认客户端函数确实运行，传入的数据仍正确。若调用后端，再检查服务端响应与权限失败路径。取消 hydration 或用 client:only 跳过服务器渲染，都不能解决一个函数原本定义在 Astro 服务器上下文中的传输问题。