React的组件三大属性之props

Person.js

import React from 'react';
import PropTypes from 'prop-types';

function Person (props) {

    return (
        <ul>
            <li>name:{props.name}</li>
            <li>age:{props.age}</li>
            <li>sex:{props.sex}</li>
        </ul>
    )
    
  }

  //指定默认属性值
  Person.defaultProps ={
      sex: '男',
      age :22
  }
  // 指定属性值的类型 和必要性
  Person.propTypes = {
      name : PropTypes.string.isRequired,
      age : PropTypes.number
  }
export default Person;

index.js

const p1 = {
  name:'tom',
  age : 35 ,
  sex :'man'
}
//ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex}></Person>, document.getElementById('person') );

/*【难点】 ...的作用 
1、打包  function fun1(...as) {}  
fun1(1,2,3)
2、解包(拆包) ，也适用拆数组、拆对象
const arr1 =[1,2,3]  
const arr2 = [6, ...arr1 ,9]
*/
ReactDOM.render(<Person {...p1}/>, document.getElementById('person') );
const p2 = {
  name:'jack'
}

ReactDOM.render(<Person name={p2.name} age={12}></Person>, document.getElementById('person1') );