React Props 中级篇 —— 如何简化props的使用和如何在函数式组件中使用props
1. 简化props的使用:在Person本身添加 关键字 static
class Person extends React.Component{
static propTypes = {
name:PropTypes.string.isRequired,
age:PropTypes.number,
sex:PropTypes.string,
}
static defaultProps = {
age:1,
sex:'没有性别'
}
}
ReactDOM.render(<Person name="小明" age={20}/>,document.getElementById("test"))
2. 函数中使用props
function person(props){
console.log(props) 返回对象的类型
const {name,age,sex,speck} = props
return (
<ul>
<li>姓名:{name}</li>
<li>年龄:{sex}</li>
<li>性别:{age}</li>
</ul>
)
}
**添加限制props的方法**
// 限制类型
Person.propTypes = {
name:PropTypes.string.isRequired,
age:PropTypes.number,
sex:PropTypes.string,
}
// 默认值
Person.defaultProps = {
age:18,
sex:'没有性别'
}
ReactDOM.render(<Person name="小明" sex={} age={20}/>,document.getElementById("test"))