0

0

如何正确地将函数作为 props 传递给 React 函数子组件

花韻仙語

花韻仙語

发布时间:2026-01-24 15:26:15

|

460人浏览过

|

来源于php中文网

原创

如何正确地将函数作为 props 传递给 React 函数子组件

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 对象,再通过点语法访问

SpeechEasy
SpeechEasy

SpeechEasy是一种合成语音解决方案,可以让用户从文本生成高质量、易于理解的音频。

下载
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 丢失问题。

相关专题

更多
console接口是干嘛的
console接口是干嘛的

console接口是一种用于在计算机命令行或浏览器开发工具中输出信息的工具,提供了一种简单的方式来记录和查看应用程序的输出结果和调试信息。本专题为大家提供console接口相关的各种文章、以及下载和课程。

412

2023.08.08

console.log是什么
console.log是什么

console.log 是 javascript 函数,用于在浏览器控制台中输出信息,便于调试和故障排除。想了解更多console.log的相关内容,可以阅读本专题下面的文章。

501

2024.05.29

undefined是什么
undefined是什么

undefined是代表一个值或变量不存在或未定义的状态。它可以作为默认值来判断一个变量是否已经被赋值,也可以用于设置默认参数值。尽管在不同的编程语言中,undefined可能具有不同的含义和用法,但理解undefined的概念可以帮助我们更好地理解和编写程序。本专题为大家提供undefined相关的各种文章、以及下载和课程。

5242

2023.07.31

网页undefined是什么意思
网页undefined是什么意思

网页undefined是指页面出现了未知错误的意思,提示undefined一般是在开发网站的时候定义不正确或是转换不正确,或是找不到定义才会提示undefined未定义这个错误。想了解更多的相关内容,可以阅读本专题下面的文章。

3022

2024.08.14

网页undefined啥意思
网页undefined啥意思

本专题整合了undefined相关内容,阅读下面的文章了解更多详细内容。后续继续更新。

268

2025.12.25

C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

9

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

25

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

18

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

19

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.0万人学习

React核心原理新老生命周期精讲
React核心原理新老生命周期精讲

共12课时 | 1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号