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 299
React 组件进阶 Contents 目  组件通讯介绍  组件的 props组件通讯的三种方式  Context  props 深入  组件的生命周期  render-props和高阶组件 1. 组件通讯介绍 组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能 拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据 。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就
React系列：函数式组件
发果叁
10-26 3008
​ 基于优缺点中的内容，由于Hooks的使用，不具备state和生命周期已经不再是函数式组件的缺陷，所以他们由于内存使用以及更新渲染上的优势，更应该被使用。所以，一般情况下函数式组件是较好的选择，非要使用类组件的时候，也应该使用PureComponent。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
React之函数式组件使用props
wanggang182007的博客
03-31 1080
<!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 353
函数式组件使用props
react在函数组件中获取参数的三种方法
最新发布
in_dexof的博客
09-28 223
3.state方法 方式传参 调用useLoaction 传递函数 返回的是一个对象，需要结构赋值state，state是一个对象，对象.属性名即可。2.params 方式传参 调用useParams 传递函数 返回的是一个对象，传递的参数以键值对的方式存储，直接结构使用即可。使用useLocation 函数 返回的一个对象，直接结构state，我们传递的state是一个对象，直接对象的属性调用即可。第二种方式 是通过params 方式传参，列：“/index/1” ，不过需要在路由中预留参数。
React 之 函数式组件使用props
qq_51219425的博客
03-08 4689
对于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 263
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 1578
【React 框架】函数式组件 / 类式组件 ( state / props / refs / 事件处理 )
React中的函数组件和props
weixin_45336072的博客
04-21 1403
函数组件和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 1508
类式组件的this指向实例对象，所以可以使用this获取state和props 函数式组件的this没有指向实例对象，所以无法使用state和refs。但是函数能够使用props属性，因为函数能接收参数 函数式组件传统写法： 如果打印this会发现是undefined 可以直接接收到props 打印 函数式组件的参数校验写法： 总结：函数式组件可以使用props ...
react16：函数组件中使用props
richest_qi的博客
04-01 1719
函数组件中也可以使用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 1943
（这种情况几乎不存在，在构造器中我们可以直接访问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 815
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)
react中怎么为props设置默认值
笔记、经验、日常分享
05-20 1106
在react中可以通过props来实现父子组件之间的数据传递。有些时候，需要给props一个默认值，当在使用组件的时候如果没有给数据，可以显示默认数据，让用户体验更好。哪么在react中，在class组件或函数式组件中应该如何为props指定默认值呢？
ReactJS实战之组件和Props详解，Java成长路线图
qq194582923的博客
03-30 1053
可能有人会问我为什么愿意去花时间帮助大家实现求职梦想，因为我一直坚信时间是可以复制的。我牺牲了自己的大概十个小时写了这片文章，换来的是成千上万的求职者节约几天甚至几周时间浪费在无用的资源上。上面的这些（算法与数据结构）+（Java多线程学习手册）+（计算机网络顶级教程）等学习资源图片转存中…(img-TcMhgjt1-1711782181593)]可能有人会问我为什么愿意去花时间帮助大家实现求职梦想，因为我一直坚信时间是可以复制的。
React的Props校验与默认值
qq942909661的博客
05-11 243
如何在react中对props进行校验与设置默认值
深度讲解React Props
grooyo的博客
09-28 1419
每个组件对象都会有props(properties的简写)属性组件标签的所有属性都保存在props中通过标签属性从组件外向组件内传递变化的数据注意:组件内部不要修改props数据使用propTypes 属性并配合prop-types 三方库实现prop验证（不用另外下载，已集成在脚手架中）
深入学习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、付费专栏及课程。

余额充值