1.react中的列表渲染
注意使用以下代码的话,注意包的导入路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./js/react.js"></script>
<script src="./js/react-dom.js"></script>
<script src="./js/babel.min.js"></script>
</head>
<script type="text/babel">
function handle(){
alert(1)
}
function MyCom(props) {
if(props.boo){
return <h1>真的</h1>
}else{
return <h1 onClick={handle}>假的</h1>
}
}
function MyLie(props){
return (
<ul>
{
props.arr.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</ul>
)
}
class Myobj extends React.Component{
constructor(props){
super(props)
}
render(){
<!-- console.log(this.props) -->
return <h1>年龄:{this.props.age}</h1>
}
}
ReactDOM.render(<MyLie arr={[1,2,3,4]} />,document.getElementById('main'))
ReactDOM.render(<MyCom boo={false} />,document.getElementById('ma'))
ReactDOM.render(<Myobj oo={{username:'terry',age:13}} />,document.getElementById('mu'))
</script>
<body>
<div id="ma"></div>
<div id="mu"></div>
<div id="main"></div>
</body>
</html>