<!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>渲染列表</title>
<script src="../lib/react.development.js"></script>
<script src="../lib/react-dom.development.js"></script>
<script src="../lib/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
class List extends React.Component{
// 这里的component c要大写,后面没有s
constructor(props){
super(props);
}
render(){
// 子组件获取传来的数组并解构使用
let {list} = this.props;
// 解构，已知props有list属性直接提取到list
// 等同于let list = this.props.list
// 当层次比较多的时候，可以通过解构提取里面的内容，简化代码
return(
<ul>
{list.map((item,index)=>{
// item子体 index下标
// react里一般使用map遍历，通过return返回渲染代码块
// map可用于返回符合条件的内容结合if语句
// map不结合if判断语句则可以遍历数组，返回全部数组的内容
return(
<li key={item.id}>
{item.name}--{item.age}
</li>
)
})}
</ul>
)
}
}
const list = [
{id:1,name:'你妹',age:'20'},
{id:2,name:'你哥',age:'20'},
{id:3,name:'你姐',age:'20'},
{id:4,name:'你表姐',age:'20'}
]
ReactDOM.render(
<List list={list}></List>,
// 通过组件把数组当成参数传到子组件里面去
document.querySelector('#app')
)
</script>
</body>
</html>
网友评论