有了props屬性，可以動(dòng)態(tài)的向React組件傳遞信息, 同時(shí)可以對(duì)標(biāo)簽屬性的類型及默認(rèn)值進(jìn)行限制
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | <!-- 準(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> |
