
在 react 中,函数组件接收的唯一参数是 `props` 对象,而非多个独立参数;若直接解构为多个形参(如 `(contactinfo, runserverless)`),会导致仅第一个参数接收全部 props,其余形参为 `undefined`,从而无法访问传入的函数。
React 函数组件的设计原则是:所有传入的 props 都会合并为一个单一的 props 对象,并作为第一个且唯一的参数传入组件。因此,以下写法是错误的:
// ❌ 错误:将 props 拆成多个参数,实际只有 contactInfo 接收到整个 props 对象
export const VaultEntry = (contactInfo, runServerless) => {
console.log(runServerless); // undefined!
return ...;
};此时 contactInfo 实际上等于 { contactInfo: userData, runServerless: runServerlessFn },而 runServerless 参数根本未被赋值,始终为 undefined。
✅ 正确做法有以下两种:
方式一:接收 props 对象,再通过点语法访问
export const VaultEntry = (props) => {
console.log(typeof props.runServerless); // "function"
console.log(props.contactInfo); // { userData... }
// 可安全调用
// props.runServerless();
return ...;
};方式二:使用解构语法,在参数声明时直接提取所需字段(推荐)
export const VaultEntry = ({ contactInfo, runServerless }) => {
console.log(typeof runServerless); // "function"
console.log(contactInfo); // 已解构出的 userData
// ✅ 现在可直接调用
// runServerless();
return ...;
};⚠️ 注意事项:
- 解构时务必确保属性名与父组件传递的 prop 名完全一致(区分大小写,如 runServerless ≠ runserverless);
- 若不确定 props 结构,可在组件开头加 console.log(props) 快速验证;
- TypeScript 用户建议为组件添加 Props 类型定义,避免运行时属性访问错误;
- 不要混淆类组件的 this.props 写法——函数组件中不存在 this,一切依赖 props 参数。
总结:React 函数组件不是多参数函数,而是单参数(props)函数。牢记这一基本契约,就能避免 90% 的 props 丢失问题。










