<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
let arr = [
{
id:1,
name:'xiaobai',
age:19
},
{
id:2,
name:'xiaoxiaobai',
age:11
},
{
id:3,
name:'dabai',
age:13
}
]
function List() {
return (
<ul>
{ arr.map((obj)=>{
return <li className='tit' key={obj.id} style={{color:obj.id===1?'red':'blue'}} onClick={()=>{
alert(obj.age)
}}>
{obj.name}
</li>
})}
</ul>
)
}
ReactDOM.render(
<div><List />{List()}</div>, //如何传参 可以写成解析的模式或者写成标签jsx的形式
document.getElementById('app')
)
</script>
</body>
</html>