React 组件实例的三大核心—props

0x00 前言

CTF 加解密合集
CTF Web合集
网络安全知识库
溯源相关

文中工具皆可关注皓月当空w 公众号发送关键字工具获取

0x01 props 基础

1.props渲染

1.1 常规渲染

class Person extends React.Component{render(){const {name,age,sex} = this.propsreturn (<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} = propsreturn (<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>