(1)props基本使用

在将组件渲染到页面上的时候是可以携带信息的

202110181634535419838533

其中name是key,tom是value,其他同理

此时在页面中打印Person组件的实例对象

202110181634535444205088
202110181634535453136445

这时候在组件中就可以使用this.props.name拿到数据

202110181634535469193488

这样的优点就是多个组件可以动态修改数据:

202110181634535477151316

可以通过解构赋值简化取值操作:

202110181634535493230686

(2)props进阶使用

1、先定义数据再使用props

方法一:

202110181634535522109471

方法二:

202110181634535529936902

展开符运算扩展:求和运算

202110181634535538723976

复制一个对象:

202110181634535552654376

202110181634535559206182

2、传props时传递数值型

202110181634535570527237

3、对props进行限制

先引入prop-types.js包

202110181634535580138608

(1)对传递的标签属性进行类型的限制

(2)指定name属性必须传递

(3)给sex一个默认值,当sex没写的时候有个默认值

202110181634535602132133

202110181634535623431882

限制必须传递函数:

202110181634535632207198

4、props是只读的,无法修改

202110181634535650146748

202110181634535654455147