0x00 前言
文中工具皆可关注 皓月当空w 公众号 发送关键字 工具 获取
0x01 props 基础
1.props渲染
1.1 常规渲染
class Person extends React.Component{
render(){
const {name,age,sex} = this.props
return (
<ul>
<li>姓名:{name}</li>
<li>性别:{sex}</li>
<li>年龄:{age}</li>
</ul>
)
}
}
ReactDOM.render(<Person name="Em" age="18" sex="女"/>,document.getElementById('test'))
1.2 展开运算符渲染
const p ={name:"张三",age:"18",sex:"女"}
ReactDOM.render(<Person {...p}/>,document.getElementById('test2'))
2.props限制
2.1 属性限制
Person.propTypes ={
name:PropTypes.string.isRequired,
sex:PropTypes.string,
age:PropTypes.number,
}
2.2 必要性限制
name:PropTypes.string.isRequired,
2.3 默认值
Person.defaultProps={
sex:"无",
age:"18"
}
2.4 限制方法
Person.propTypes ={
name:PropTypes.string.isRequired,
sex:PropTypes.string,
age:PropTypes.number,
speck:PropTypes.func,
}
3.props只读
在props中的属性是只读的,无法修改数据
4.函数式 props使用
<script type="text/babel">
function Person(props){
const {name,age,sex} = props
return (
<ul>
<li>姓名:{name}</li>
<li>性别:{sex}</li>
<li>年龄:{age}</li>
</ul>
)
}
Person.propTypes ={
name:PropTypes.string.isRequired,
sex:PropTypes.string,
age:PropTypes.number,
speck:PropTypes.func,
}
Person.defaultProps={
sex:"无",
age:18
}
ReactDOM.render(<Person name="张三"/>,document.getElementById("test"))
</script>
other
欢迎大家关注我朋友的公众号 皓月当空w 分享漏洞情报以及各种学习资源,技能树,面试题等。
以上