<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React 列表渲染</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
class App extends React.Component {
constructor(porps) {
super(porps)
this.state = {
userName: ["huzhenchu", "chuchuhu", "zhenchuhu", "huchuchu"], // 数组的渲染
num: [110, 20, 3, 0, 14, 46, 55, 66, 825, 366, 211, 121212], // 数组的过滤
subArray:["第一名","第二名","第三名","第四名","第五名","第六名","第七名","第八名","第九名","第十名","第十一名","第十二名"]
}
}
render() {
// {/*第二种方式*/}
let newArr = this.state.num.filter(i => {
return i >= 50
})
return (
<div>
<h2>名字列表</h2>
<ul>
{
this.state.userName.map((i) => {
return <li>{i}</li>
})
}
</ul>
<h2>数字列表</h2>
<ul>
{/*第一种方式*/}
{
this.state.num.map(i => {
if (i >= 50) {
return <li>{i}</li>
}
})
}
</ul>
{/*第二种方式*/}
<h2>数字列表过滤</h2>
<ul>
{
newArr.map(i => {
return <li>{i}</li>
})
}
</ul>
{/*第三种方式:链式调用*/}
<h2>数字列表过滤简写方式</h2>
<ul>
{
this.state.num.filter(i => i >= 50).map(j => <li>{j}</li>)
}
</ul>
{/*数组的截取*/}
<h2>数组的截取</h2>
<ul>
{/*slice(开始位置,结束位置) 为什么要写4呢? 因为这个地方的虽然写上了4,但是它只会截取到数组下标为三的地方 */}
{
this.state.subArray.slice(0,8).map(i=> <li>{i}</li>)
}
</ul>
</div>
)
}
}
ReactDOM.render(<App />, document.querySelector("#root"));
</script>
</body>
</html>
实际截图:
image.png
网友评论