脚本宝典收集整理的这篇文章主要介绍了React 学习之路 (七)列表渲染 && keys,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
列表渲染 && keys
map()
map函数会对数组的每一个元素进行处理,然后返回一个新的数组
const num = [1, 2, 4, 5];
const num1 = num.map((@H_360_37@number) => {
return number * 2;
})
console.log(num1); // [2, 4, 8, 10]
console.log(num); // [1, 2, 4, 5]
渲染多个组件
<!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>
</head>
<body>
<div id="app"></div>
<script src="../react/react.js"></script>
<script src="../react/react-dom.js"></script>
<script src="https://cdn.bootcss.COM/babel-core/5.8.35/browser.js"></script>
<script type="text/babel">
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>{
return <li>{number}</li>
});
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('app')
);
</script>
</body>
</html>
基础组件列表
我们可以把前面的例子重构成一个组件。这个组件接收numbers数组作为参数,输出一个无序列表。