组件三大核心属性2: props
1.理解
- 每个组件对象都会有props(properties的简写)属性
- 组件标签的所有属性都保存在props中
2.作用
- 通过标签属性从组件外向组件内传递变化的数据
- 注意: 组件内部不要修改props数据
3.编码操作(解析)
- 内部读取某个属性值 基本使用:①标签传递的属性,会搜集到props中②上边标签传递的属性可以用…批量传递属性
- 对props中的属性值进行类型限制和必要性限制(非必须,只是更标准点)
第一种方式(React v15.5 开始已弃用):
第二种方式(新):使用prop-types库进限制(需要引入prop-types库)
更深一步了解
如图可发现,只要你传递标签属性,就会收集到props里面
props最基本的用法
如果信息特别多,上边就会显的繁琐,继续看后边
4.小案例
需求: 自定义用来显示一个人员信息的组件
1.姓名必须指定,且为字符串类型;
2.性别为字符串类型,如果性别没有指定,默认为男
3.年龄为字符串类型,且为数字类型,默认值为18
代码
用函数式组件改写案例代码
5.回顾一下展开运算符
展开运算符不能展开对象,但是加{ }就可以
愿有所收获,喜欢的点赞关注 持续更新中…