看了CrazyCodeBoy老师关于props和state的视频,又掌握了一些新的东西。
1.设置默认属性
对于需要从父组件传递的属性,我们可以在定义组件时,设置一个默认的属性,具体写法如下:
static defaultProps = {
name:'Tom',
age:16
}
2.对props的约束和检查
对于定义出来的组件,你无法要求使用者在使用时传入什么类型的属性,例如你需要一个number类型的年龄,使用者可能会传入一个字符串,所以在定义组件时,可以对props可以通过PropTypes进行约束和检查,具体写法如下
import PropTypes from 'prop-types'; //先导入PropTypes
static propTypes = {
name:PropTypes.string, //要求name是string类型的
age:PropTypes.number.isRequired //要求age是number类型的 ,isRequired要求该属性有值
}
如果使用者没有按照要求传属性,在程序运行时会在程序底部报黄色的提示
3.props的使用技巧:延展操作符和解构赋值
例如,你定义了一个组件<PropComponent>,需要name,age,sex三个属性,在使用时你可能这样写:
let params = {name:'tom',age:16,sex:'男'};
<PropComponent name={params.name} age={params.age} sex={params.sex}/>
这种写法比较复杂,使用延展操作符就比较简单了,具体写法如下:
let params = {name:'tom',age:16,sex:'男'};
<PropComponent {...params}/> //这样可以把3个属性一起传入
或者你只想传入两个属性的话,可以这样写:
let{name,age} = params;
<PropComponent name = {name} age = {age}/> //这样写法用到了结构赋值的方法
4.关于state的初始化
有两种方式:
第一种方式:在组件的constructor()方法中初始化:
constructor(prpos){
super(props);
this.state ={
count:0; //初始化一个count的state,初始值为0
}
}
第二种方式:
不在constructor()构造方法中
在组件的class中,直接写:
state = {
count:0; //初始化一个count的state,初始值为0
}
与第一种写法的效果是一样的