react功能实现-数组遍历渲染

在react中如何将一个数组遍历,并且逐个渲染在页面上?

1.在jsx渲染中,如果这个变量是一个数组，则会展开这个数组的所有成员.

    var arr = [

      <h1>Hello world!</h1>,

      <h2>React is awesome</h2>,

    ];

    ReactDOM.render(

      <div>{arr}</div>,

      document.getElementById('example')

    );

example元素中将产生两个div,一个里面有h1标签和一个里面有h2标签.

2.array.map().

<ul>

        {

            arr.map(function(val){

                return <li>{val}</li>

            })

</ul>

array.map()的参数为一个函数,这个函数是每个array中的元素应该执行的函数,参数为val.

其实这个方法也是依赖于第1个特性的,因为array.map()是有返回值的,返回值是一个新数组.所以最终相当于<ul>{newArray}</ul>

3.为什么不能用forEach()?

因为forEach()没有返回值

巴特西

react功能实现-数组遍历渲染

最新文章

热门文章