React -动态展示数据列表

react 动态渲染数据列表，小demo走一波

那么咱们先来提出一个问题吧

如何将一个数据的数据转换为一个标签的数组？

如const eleArry = ['js','jquery','react','bootstrap','angular']

<div id="demo"></div>

1) 首先呢需要创建一个虚拟dom

动态列表，所以无论数据还是属性都必须是动态的，那么就需要{}

在创建时如果标签是嵌套类型的，那么如果在外部加一层括号

const ulList = (

<ul>{names.map((name,index)=><li key={index}>name</li>)</ul>

)

2)渲染虚拟DOM

ReactDom.render(ulList,document.getElementById('demo'))

bingo！！！！

这里用到来map(),那么就趁机多说一丢丢关于它的用法吧

map()方法定义在JavaScript的Array中，它返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。

注意：map()不会对空数组进行检测       map()不会改变原始数组

语法就是var new_array = arr.map(functioncallback(currentValue[, index[, array]]) {

  // Return element for new_array 

}[,thisArg])

其中的参数:

callback

生成新数组元素的函数，使用三个参数：

currentValue

callback 数组中正在处理的当前元素。

index可选

callback 数组中正在处理的当前元素的索引。

array可选

map方法调用的数组。

thisArg可选

执行callback函数时值被用作this。

。