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') );