4.React组件实例三大属性2.props

1.理解

1. 每个组件对象都会有props（properties）属性
2. 组件标签的所有属性都保存的props

2.作用

1. 通过标签属性从组件外向组件内传递变化的数据
2. 注意：组件内部不要修改props数据

3.编码实现

1. 内部读取某个属性值
   this.props.name
2. 对props中的属性值进行类型限制和必要性限制
   需要引入prop-types库

Person.propTypes = {
  name:Proptypes.string.isRequired,
  age:Proptypes.number
}

3. 扩展属性：将对象的所有属性通过props传递

<Person {...person}/>

4. 默认属性值：

Person.defaultProps = {
  age:18
  sex:"male"
}

5. 组件类的构造函数
   constructor(props){
   super(props)
   console.log(props)//打印所有属性
   }

4.完整实现

    //1.创建组件
    class Person extends React.Component{
        //对props进行限制（需先引入依赖包），传入的类型不符合限制，会出warning
        // 加static关键字会将属性加在类本身上，不加会写在类的实例对象上
        static propTypes = {
            age: PropTypes.number,
            name : PropTypes.string.isRequired,
            speak : PropTypes.func
        } 
        //指定默认的标签属性值
        static defaultProps = {
            sex:"不男不女",
            age:18
        }
        //render方法
        render(){
            const{name,age,sex}= this.props
            return(
                <ul>
                    <li>姓名：{name}</li>
                    <li>性别：{sex}</li>
                    <li>年龄：{age+1}</li>
                </ul>
            )
        }
    }
  
    // 2.渲染
    // 此处的年龄18 用大括号是引用了js语法，如果直接传数值而不加大括号，react无法识别
    ReactDOM.render(<Person name= "jerry" age= {18} sex="male" speak = {speak}/>,document.getElementById("test"))

    const p = {name: "Lily",age:18,sex:"female"} 
    ReactDOM.render(<Person {... p }/>,document.getElementById("test2"))

    function speak() {
        console.log ("俺会说话")
    }