React04——组件实例三大属性之props属性

理解

1. 每个组件对象都会有props(properties的简写)属性
2. 组件标签的所有属性都保存在props中

作用

1. 通过标签属性从组件外向组件内传递变化的数据
2. 注意: 组件内部不要修改props数据

编码操作

内部读取某个属性值

 

this.props.name

 

对props中的属性值进行类型限制和必要性限制

第一种方式（React v15.5 开始已弃用）：

Person.propTypes = {  name: React.PropTypes.string.isRequired,  age: React.PropTypes.number }

 

第二种方式（新）：使用prop-types库进限制（需要引入prop-types库）

      

Person.propTypes = {   name: PropTypes.string.isRequired,   age: PropTypes.number. }

 

扩展属性: 将对象的所有属性通过props传递

 

<Person {...person}/>

 

默认属性值：

 

Person.defaultProps = {   age: 18,   sex:'男' }

组件类的构造函数

 

constructor(props){   super(props)   console.log(props)//打印所有属性 }

props的基本使用

props进行限制

props的简写方式

函数组件使用props