2.3.2. 理解
1.每個(gè)組件對(duì)象都會(huì)有props(properties的簡(jiǎn)寫)屬性
2.組件標(biāo)簽的所有屬性都保存在props中
2.3.3. 作用
1.通過標(biāo)簽屬性從組件外向組件內(nèi)傳遞變化的數(shù)據(jù)
2.注意: 組件內(nèi)部不要修改props數(shù)據(jù)
2.3.4. 編碼操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2_類式組件.html</title>
</head>
<body>
<!-- 準(zhǔn)備好一個(gè)容器 -->
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<!-- 引入react核心庫 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babe1,用于將jsx轉(zhuǎn)為js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/* 此處一定要寫babel */
class Person extends React.Component{
state={name:'tom'}
render(){
const {name,age,sex}=this.props;
return (
<ul>
<li>姓名：{name}</li>
<li>性別：{sex}</li>
<li>年齡：{age+1}</li>
</ul>
)
}
}
ReactDOM.render(<Person name='賈卿' age={18} sex='女'/>,document.getElementById('test1'));
ReactDOM.render(<Person name='老劉' age={19} sex='男'/>,document.getElementById('test2'));
const p = {name:'老王',age:27,sex:'男'}
ReactDOM.render(<Person {...p}/>,document.getElementById('test3'));
</script>
</body>
</html>
