有了props屬性，可以動(dòng)態(tài)的向React組件傳遞信息, 同時(shí)可以對(duì)標(biāo)簽屬性的類型及默認(rèn)值進(jìn)行限制
<!-- 準(zhǔn)備好一個(gè)容器 -->
<div id="test"></div>
<div id="test2"></div>
<!-- 引入核心庫(kù) React對(duì)象 -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom， 用于支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel, 用于將jxs轉(zhuǎn)為js -->
<script src="../js/babel.min.js"></script>
<!-- 引入prop-types, 用于對(duì)組件的標(biāo)簽屬性進(jìn)行限制 -->
<script src="../js/prop-types.js"></script>
<script type="text/babel">
//1. 創(chuàng)建類式組件
class Person extends React.Component{
//props = {name:"",sex:"先生",age:0}
state = {isHot:true}
//props是只讀的
render(){
console.log(this);
const {name,sex,age} = this.props;
return (
<ul>
<li>姓名：{name}</li>
<li>性別：{sex}</li>
<li>年齡：{age+1}</li>
</ul>
)
}
static propTypes = {
name:PropTypes.string.isRequired,
sex: PropTypes.string,
age: PropTypes.number
}
static defaultProps = {
sex:"不男不女"
}
}
//有了props屬性，可以動(dòng)態(tài)的傳遞信息
// ReactDOM.render(<Person name="小強(qiáng)" sex="男" age="18"/>,document.getElementById("test"))
const p = {name:"yy",sex:"男",age:16}
//上面寫法的語法糖(適合單條信息)
ReactDOM.render(<Person {...p}/>,document.getElementById("test"))
ReactDOM.render(<Person name="小小" age={10}/>,document.getElementById("test2"))
// {} 這里的{}表示里面要寫JS表達(dá)式,
// babel + react 讓這里的 ...p 可以展開， 并非復(fù)制一個(gè)對(duì)象
// 原生這樣寫是不行的，但在這里通過babel+react讓它可以展開, 僅僅適用于標(biāo)簽屬性
//------------------------------------------------------------------------------------------------
// 函數(shù)式組件： 只能使用props屬性
function Person(props){
return (
<ul>
<li>姓名：{props.name}</li>
<li>性別：{props.sex}</li>
<li>年齡：{props.age+1}</li>
</ul>
)
}
Person.propTypes = {
name:PropTypes.string.isRequired,
sex: PropTypes.string,
age: PropTypes.number
}
Person.defaultProps = {
sex:"不男不女"
}
const p = {name:"yy",sex:"男",age:16}
ReactDOM.render(<Person {...p}/>,document.getElementById("test"))
</script>