props

• 每个组件都存在Props属性，函数声明式组件（props），类声明式组件（this.props）
• 组件标签中所有的属性都存在props中，通过对象方式获取（this.props.id），且只读
• 传参的类型，可以是对象，也可以是函数
• 可对传入的props进行类型以及默认值的限制

class Person extends React.Component {

   constructor(props) {
     super(props);
     console.log(props); //查看所有属性
   }

   render() {
     return (
       <ul>
         // 获取props值的方式
         <li>姓名: {this.props.name}</li>
         <li>性别: {this.props.sex}</li>
         <li>年龄: {this.props.age}</li>
       </ul>
     );
   }
 }

 Person.propTypes = { // 类型限制
  name: React.PropTypes.string.isRequired,
  sex: React.PropTypes.string.isRequired,
  age: React.PropTypes.number.isRequired
 };

 Person.defaultProps = { // 默认值限制
   sex: '男',
   age: 18
 };

上面这种方式是在类声明之外，进行限制，这是一种方式（看起来有点脱节），

当然也可以在内部声明，比如：

class Person extends React.Component {

    constructor(props) {
      super(props);
      console.log(props); //查看所有属性
    }

    render() {
      return (
        <ul>
          // 获取props值的方式
          <li>姓名: {this.props.name}</li>
          <li>性别: {this.props.sex}</li>
          <li>年龄: {this.props.age}</li>
        </ul>
      );
    }
    
     static.propTypes = { // 类型限制
       name: React.PropTypes.string.isRequired,
       sex: React.PropTypes.string.isRequired,
       age: React.PropTypes.number.isRequired
      };

     static.defaultProps = { // 默认值限制
        sex: '男',
        age: 18
      };
  }

• 在组件标签中，可通过扩展运算符的方式来传递props

// person = {name: 'cc', sex: '男', age: 24}
<Person {...person} />

参考