react学习（13）props

知识点

1：props的基本使用类似于标签的属性，只要在组件标签的地方写上key和value,组件实例的props就会收集到。

<script type="text/babel">
        class Person extends React.Component {
            render(){
                return (
                    <ul>
                        <li>姓名：{this.props.name}</li>
                        <li>年龄：{this.props.age}</li>
                        <li>性别：{this.props.sex}</li>
                    </ul>
                )
            }
        }
        ReactDOM.render(<Person name="tom" age="18" sex="女"/>,document.getElementById('test'));
        ReactDOM.render(<Person name="jerry" age="19" sex="男"/>,document.getElementById('test1'));
    </script>

image.png

2：批量传递props

let p = {name:'tom',age:18,sex:'女'};
ReactDOM.render(<Person {...p}/>,document.getElementById('test'));

注意：此处的{...p}并不是复制克隆对象的意思，就是展开传入，但是只能在组件标签这里使用，其他地方都不能这么写。
3：对props进行限制：需要引入一个js库

<script src="../js/prop-types.js"></script>
    <script type="text/babel">
        class Person extends React.Component {
            render(){
                return (
                    <ul>
                        <li onClick={this.props.speak}>{this.props.name}</li>
                        <li>{this.props.age}</li>
                        <li>{this.props.sex}</li>
                    </ul>
                )
            }
        }
        //限制类型：名字必填，年龄为数字，默认18，性别默认男
        Person.propTypes = {
            name:PropTypes.string.isRequired,
            sex:PropTypes.string,
            age:PropTypes.number,
            speak:PropTypes.func
        }
        Person.defaultProps = {
            sex:'男',
            age:18
        }
        ReactDOM.render(<Person name='tom' age={19} sex="女" speak={speak}/>,document.getElementById('test'));
        function speak(){
            console.log('说话了');
        }
   </script>

注意：函数类型要写成：func。
4：props是只读的，不允许修改。
5：props的简写形式，其实是把类型限制移动到Person内部，也是直接使用赋值语句，只是前面需要加上static,如果不加static的话相当于是加到类实例的身上。