react 函数组件接收 props 时必须将其作为单个参数（对象）传入，若直接解构为多个参数会导致 props 丢失；正确方式是接收 `props` 对象或使用解构语法提取所需属性。
在 React 中，函数组件的签名严格遵循 单参数接收 props 对象 的约定。你遇到的问题根源在于：
// ❌ 错误写法：将 props 拆分为多个独立参数
export const VaultEntry = (contactInfo, runServerless) => {
console.log(runServerless); // undefined —— 因为 runServerless 实际在 props 对象里，而非第二个参数
};React 不会 将 JSX 中的每个 prop 映射为单独的函数参数；它只向组件函数传入一个参数：即包含所有 props 的对象（例如 { contactInfo: userData, runServerless: runServerless }）。因此，上述写法中 contactInfo 实际接收到的是整个 props 对象，而 runServerless 是 undefined —— 这正是你看到“空白对象”和无法调用函数的原因。
✅ 正确做法有两种：
方式一：接收 props 对象，再访问属性
export const VaultEntry = (props) => {
console.log(typeof props.runServerless); // "function"
console.log(props.contactInfo); // 正确获取 userData
// 可安全调用
// props.runServerless();
return <div>...</div>;
};方式二：使用解构赋值（推荐，更简洁清晰）
export const VaultEntry = ({ contactInfo, runServerless }) => {
console.log(typeof runServerless); // "function"
console.log(contactInfo); // 已解构，可直接使用
return (
<button onClick={() => runServerless()}>
Trigger Serverless Function
</button>
);
};⚠️ 注意事项：
- 解构时确保属性名与父组件传递的 prop 名完全一致（区分大小写，如 runServerless ≠ runserverless）；
- 若某些 prop 可能未传入，建议添加默认值或做存在性检查，避免运行时错误：
export const VaultEntry = ({ contactInfo, runServerless = () => {} }) => { ... } - 在开发环境开启 eslint-plugin-react 并启用 react/prop-types 或使用 TypeScript，可提前捕获此类类型与结构错误。
总结：React 函数组件的参数设计是刻意为之的——统一为单个 props 对象，既保证接口一致性，也便于后续扩展（如 children、ref 转发等）。养成「始终以对象形式接收 props」的习惯，能避免大量低级但棘手的调试耗时。
