<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>04_component_props</title>
</head>
<body>
<div id="example1"></div>
<div id="example2"></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/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
/*
需求: 自定义用来显示一个人员信息的组件, 效果如页面. 说明
1). 如果性别没有指定, 默认为男
2). 如果年龄没有指定, 默认为18
*/
// function People(props){
// return (
// <ul>
// <li>姓名:{props.name}</li>
// <li>性别：{props.sex}</li>
// <li>年龄：{props.age}</li>
// </ul>
// )
// }
class People extends React.Component{
render(){
return(
<ul>
<li>姓名:{this.props.name}</li>
<li>性别:{this.props.sex}</li>
<li>年龄:{this.props.age}</li>
</ul>
)
}
}
//定义完后指定属性默认值
People.defaultProps={
sex:'男',
age:18
}
//指定属性值的类型和必要性，引入prop-types.js,注意下面大小写
People.propTypes={
name:PropTypes.string.isRequired,
age:PropTypes.number
}
var p1={
name:'小米',
sex:'男',
age:19
}
/*
...的作用
1.打包
function fn(...as){} fn(1,2,3) 将123打包成一个数组包
2.解包
const arr1=[1,2,3] const arr2=[6,...arr1,9] arr2变成了6,1,2,3,9
*/
//ReactDOM.render(<People name={p1.name} sex={p1.sex} age={p1.age}/>,document.getElementById('example1'))
//解包
ReactDOM.render(<People {...p1}/>,document.getElementById('example1'))
var p2={
name:'小华'
}
ReactDOM.render(<People name={p2.name} age={20}/>,document.getElementById('example2'))
</script>
</body>
</html>
|