React: 函数式组件如何使用props

已于 2022-04-23 18:22:57 修改
阅读量2.8k 收藏
点赞数
分类专栏： react 文章标签： reactjs 前端
于 2022-04-23 18:21:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41829196/article/details/124367772
版权
本文介绍了React函数式组件如何接收和使用props，展示了如何通过形参获取并打印props对象。同时，代码示例中添加了参数类型限制，强调了在函数式组件中使用refs和state需要借助React Hooks。
摘要由CSDN通过智能技术生成

背景

函数式组件本质上是一个函数，既然是函数就可以接收参数，通过这种形式来接收props

代码

如图所示，在Person组件中传递来3个属性：name,sex,age，React会将这些属性处理成一个对象传递到函数式组件的形参中，在函数式组件打印props,结果如下：

添加上参数类型限制，完整代码：

总结

组件三大核心属性：refs,state,props,在函数式组件可以直接使用props,但是想使用refs和state需要借助hooks

HainesFreeman
关注
专栏目录
React 组件通讯
yexiangCSDN的专栏
05-19 285
React 组件进阶 Contents 目  组件通讯介绍  组件的 props组件通讯的三种方式  Context  props 深入  组件的生命周期  render-props和高阶组件 1. 组件通讯介绍 组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能 拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据 。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就
React系列：函数式组件
发果叁
10-26 2994
​ 基于优缺点中的内容，由于Hooks的使用，不具备state和生命周期已经不再是函数式组件的缺陷，所以他们由于内存使用以及更新渲染上的优势，更应该被使用。所以，一般情况下函数式组件是较好的选择，非要使用类组件的时候，也应该使用PureComponent。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
React之函数式组件使用props
wanggang182007的博客
03-31 1067
<!DOCTYPE html> <html> <head> <meat charset="UTF-8"> <title>3_函数式组件使用props</title> </head> <body> <!-- 准备好一个容器 --> <div id="test1"></div> <div id="tes...
【react】函数式组件使用props
bbt953的博客
03-10 340
函数式组件使用props
vue props 接收 function
最新发布
m0_59347444的博客
08-26 140
vue props 接收 function 解决多层 $emit 传参问题
React 之 函数式组件使用props
qq_51219425的博客
03-08 4674
对于react的三大核心属性state、props、refs，只有props能被函数式组件使用，因为只有props属性可以作为参数调用。 相关代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>3_函数组件使用props</title> </head> <body> <!--准备好一个容器--&gt
React Props 中级篇 —— 如何简化props的使用和如何在函数式组件中使用props
weixin_54259790的博客
08-24 250
React 中级篇 —— 如何简化props的使用和如何在函数式组件中使用props 1. 简化props的使用：在Person本身添加 关键字 static class Person extends React.Component{ static propTypes = { name:PropTypes.string.isRequired, age:PropTypes.number, sex:PropTypes.string, }
【React 框架】React面向组件编程：函数式组件 / 类式组件 ( state / props / refs / 事件处理 )
qq_30148319的博客
06-12 1559
【React 框架】函数式组件 / 类式组件 ( state / props / refs / 事件处理 )
React中的函数组件和props
weixin_45336072的博客
04-21 1387
函数组件和calss组件 函数组件（接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素，本质上是JavaScript函数） function Welcome(props) { return <h1>Hello, {props.name}</h1>; } class组件 class Welcome extends React.Component { render() { return <h1>Hello, {this.prop
functional-react:为 React 组件制作函数式 API 的实验
06-01
为 React 组件制作函数式 API 的实验 这是一个实验性库，旨在了解以完全函数式的方式编写 React 组件，受启发。 要在功能性React中定义 React 组件，您将渲染和生命周期方法定义为纯函数（不使用this指针），然后将...
React 初学 - 函数式组件使用props - 个人笔记22
树上骑个猴的博客
07-17 1502
类式组件的this指向实例对象，所以可以使用this获取state和props 函数式组件的this没有指向实例对象，所以无法使用state和refs。但是函数能够使用props属性，因为函数能接收参数 函数式组件传统写法： 如果打印this会发现是undefined 可以直接接收到props 打印 函数式组件的参数校验写法： 总结：函数式组件可以使用props ...
react16：函数组件中使用props
richest_qi的博客
04-01 1706
函数组件中也可以使用props。看个简单的例子，如下。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1
【react全家桶学习】react中组件的props属性（详）
蜗牛~~
04-27 1922
（这种情况几乎不存在，在构造器中我们可以直接访问props而不是this.props，因此在实际开发中构造器就是能省略就省略，作用不大）应该加上花括号，react才会去读取花括号里面的东西（还记得vue里面吗，vue是在变量名加上冒号，代表读取变量，如。构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props。学过了vue的props属性，那react中的props属性如何使用呢？如果属性特别多，我们通过上面的方式传递十分繁琐，那如何批量传递呢？
React 的函数组件和类组件中的props
热门推荐
youngjqz的博客
05-15 1万+
React 的函数组件和类组件中的props 函数组件 函数组件中的props是一个对象直接作为函数的参数传入,在组件内容中可以直接用点语法使用props对象中的属性,代码如下: function Test1(props) { return( &lt;div&gt; The user is &lt;b&gt;{props...
React组件通信--props
1234Wu--Blog
12-30 804
React组件通信 1、props接收数据 ReactDOM.render( <App name='传递数据' age={19} color={[1,2,3]} fn={()=>{console.log('函数')}} tag={<p>段落</p>} />,document.getElementById("root") ); 函数组件：props function App(props) { function myClick(e)
ReactJS实战之组件和Props详解，Java成长路线图
qq194582923的博客
03-30 1041
可能有人会问我为什么愿意去花时间帮助大家实现求职梦想，因为我一直坚信时间是可以复制的。我牺牲了自己的大概十个小时写了这片文章，换来的是成千上万的求职者节约几天甚至几周时间浪费在无用的资源上。上面的这些（算法与数据结构）+（Java多线程学习手册）+（计算机网络顶级教程）等学习资源图片转存中…(img-TcMhgjt1-1711782181593)]可能有人会问我为什么愿意去花时间帮助大家实现求职梦想，因为我一直坚信时间是可以复制的。
深度讲解React Props
grooyo的博客
09-28 1384
每个组件对象都会有props(properties的简写)属性组件标签的所有属性都保存在props中通过标签属性从组件外向组件内传递变化的数据注意:组件内部不要修改props数据使用propTypes 属性并配合prop-types 三方库实现prop验证（不用另外下载，已集成在脚手架中）
React组件进阶--组件通讯介绍，组件的 props特点，组件通讯的三种方式子到父，父到子，兄弟到兄弟组件，Context，回顾练习
m0_54088431的博客
09-04 963
组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能 拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通讯。
深入学习React：构建函数式Web应用
本书覆盖了React的基础知识，新兴JavaScript特性，函数式编程概念，以及如何使用React与JSX进行Web开发。书中还涉及了组件树、属性（Props）、状态（State）等关键概念，帮助开发者构建功能丰富的React应用。" 1. *...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值