react props

1.props对象存储在组件实例对象中（this）

理解:
-每个组件对象都会有props（properties）属性
-组件标签的所有属性都保存在props中
作用：
-通过标签属性从组件外向组件内传递变化的数据
-注意：组件内部不要修改props（只读的）

2.三个例子：
2.1 props的基本使用

 <div id="test"></div>
  <div id="test2"></div>
  <div id="test3"></div>
  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>
  <script type="text/babel">
  class Person extends React.Component{

    render(){
      console.log(this);
      const {name,sex,age} = this.props //解构
      return(
        <ul>
        <li>姓名：{name}</li>  
        <li>性别：{sex}</li>  
        <li>年龄：{Number(age) + 1}</li>  
        </ul>
      )
    }
  }
  const info = {name:'Tom' , age:18 , sex:'男'}
  ReactDOM.render(<Person{...info}/> , document.getElementById('test'))//在组件传的key-value值保存在类的实例对象this的props对象里
  ReactDOM.render(<Person name = 'Jerry' age = '19' sex = '男'/> , document.getElementById('test2'))//在组件传的key-value值保存在类的实例对象this的props对象里
  ReactDOM.render(<Person name = 'Mali' age = '18' sex = '女'/> , document.getElementById('test3'))//在组件传的key-value值保存在类的实例对象this的props对象里
  
  </script>

2.2 props的数据类型限制

 
  <script type="text/babel">
  class Person extends React.Component{
  
 
    render(){
   /* 
    对传入的值进行限制：propType(属性类型)
      -名字为必填，且类型是字符串
      -年龄是数值型，默认值18 default
      -性别为字符串，默认值 男
    */
   //对标签属性进行类型、必要性的限制

     Person.propTypes = {
      name:PropTypes.string.isRequired,
      age:PropTypes.number,
      sex:PropTypes.string,
      speak:PropTypes.func,//限制speak是函数

     }
     //指定标签默认值
    Person.defaultProps = {
      age:18,
      sex:'男'
    }
      console.log(this);
      const {name,sex,age} = this.props //解构
      return(
        <ul>
        <li>姓名：{name}</li>  
        <li>性别：{sex}</li>  
        <li>年龄：{age}</li>  
        </ul>
      )
    }


  }
  const info = {name:'Tom' , age:34 , sex:'男'}
  ReactDOM.render(<Person{...info}/> , document.getElementById('test'))//在组件传的key-value值保存在类的实例对象this的props对象里
  ReactDOM.render(<Person name = 'Jerry'  sex = '男' speak = {speak}/> , document.getElementById('test2'))//在组件传的key-value值保存在类的实例对象this的props对象里
  ReactDOM.render(<Person name = 'Mali' age = {45} sex = '女'/> , document.getElementById('test3'))//在组件传的key-value值保存在类的实例对象this的props对象里
  
  </script>

2.3 props的简写
（加static是把该约束加在类组件本身，而不是加在实例上）

  <script type="text/babel">
  class Person extends React.Component{
    //加static 给自身增加属性，而不是给实例
     /* 
    对传入的值进行限制：propType(属性类型)
      -名字为必填，且类型是字符串
      -年龄是数值型，默认值18 default
      -性别为字符串，默认值 男
    */
   //对标签属性进行类型、必要性的限制

   static propTypes = {
      name:PropTypes.string.isRequired,
      age:PropTypes.number,
      sex:PropTypes.string,
      speak:PropTypes.func,//限制speak是函数

     }
     //指定标签默认值
   static defaultProps = {
      age:18,
      sex:'男'
    }
 
    render(){
      console.log(this);
      const {name,sex,age} = this.props //解构
      return(
        <ul>
        <li>姓名：{name}</li>  
        <li>性别：{sex}</li>  
        <li>年龄：{age}</li>  
        </ul>
      )
    }


  }
  const info = {name:'Tom' , age:34 , sex:'男'}
  ReactDOM.render(<Person{...info}/> , document.getElementById('test'))//在组件传的key-value值保存在类的实例对象this的props对象里
  ReactDOM.render(<Person name = 'Jerry'  sex = '男' /> , document.getElementById('test2'))//在组件传的key-value值保存在类的实例对象this的props对象里
  ReactDOM.render(<Person name = 'Mali' age = {45} sex = '女'/> , document.getElementById('test3'))//在组件传的key-value值保存在类的实例对象this的props对象里
  
  </script>