03 动态展示列表数据

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <script src="../js/react.development.js"></script>
 8     <script src="../js/react-dom.development.js"></script>
 9     <script src="../js/babel.min.js"></script>
10 </head>
11 <body>
12 
13     <div id="box"></div>
14 
15     <script type="text/babel">
16        //动态展示列表数据
17         var lis=['jQuery','zeptoo','Angular','react','vue','ajax'];
18         var vul=(
19             <ul>
20             {
21               lis.map( (li,index,lis) => <li key={index}> {li} </li> ) //使用map方法将一个数据的数组转换为一个标签的数组
22             }
23             </ul>
24         )
25         ReactDOM.render(vul, document.getElementById("box"));
26     
27     </script>
28 </body>
29 </html>

数组的map方法

1，map()方法返回一个新数组，新数组中的元素为原始数组中的每个元素调用函数处理后得到的值。

2，map()方法按照原始数组元素顺序依次处理元素。

3，map()中函数的作用是对数组中的每一个元素进行处理，返回新的元素。

4，语法：array.map(function(item,index,arr[]));

5,map是数组中的方法，有一个参数，参数是一个函数，函数中有三个参数。

参数1，item必须，当前元素的值；参数2，index，可选，当前元素在数组中的索引值；参数3，arr可选，当前元素属于的数组对象