1.理解
- 每个组件对象都会有props（properties）属性
- 组件标签的所有属性都保存的props
2.作用
- 通过标签属性从组件外向组件内传递变化的数据
- 注意：组件内部不要修改props数据
3.编码实现
- 内部读取某个属性值
this.props.name
- 对props中的属性值进行类型限制和必要性限制
需要引入prop-types库
Person.propTypes = {
name:Proptypes.string.isRequired,
age:Proptypes.number
}
- 扩展属性：将对象的所有属性通过props传递
<Person {...person}/>
- 默认属性值：
Person.defaultProps = {
age:18
sex:"male"
}
- 组件类的构造函数
constructor(props){
super(props)
console.log(props)//打印所有属性
}
4.完整实现
//1.创建组件
class Person extends React.Component{
//对props进行限制（需先引入依赖包），传入的类型不符合限制，会出warning
// 加static关键字会将属性加在类本身上，不加会写在类的实例对象上
static propTypes = {
age: PropTypes.number,
name : PropTypes.string.isRequired,
speak : PropTypes.func
}
//指定默认的标签属性值
static defaultProps = {
sex:"不男不女",
age:18
}
//render方法
render(){
const{name,age,sex}= this.props
return(
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age+1}</li>
</ul>
)
}
}
// 2.渲染
// 此处的年龄18 用大括号是引用了js语法，如果直接传数值而不加大括号，react无法识别
ReactDOM.render(<Person name= "jerry" age= {18} sex="male" speak = {speak}/>,document.getElementById("test"))
const p = {name: "Lily",age:18,sex:"female"}
ReactDOM.render(<Person {... p }/>,document.getElementById("test2"))
function speak() {
console.log ("俺会说话")
}
