React中遍历数组生成标签问题

目录

• React遍历数组生成标签
• 举一个例子
• React功能实现-数组遍历渲染
• 1.在jsx渲染中
• 2.array.map().
• 3.为什么不能用forEach()?
• 总结

React遍历数组生成标签

举一个例子

一个列表根据数组渲染li元素，在vue中一个v-for就解决了，那在React中怎么实现呢？

这里我们直接引入的React文件，没用脚手架

let arr = [1,2,3];
        ReactDOM.render(

                {
                    arr.map(value => 
{value}
)
                }
            
,document.querySelector('#root'))

但这里为什么用map方法呢，因为map会返回一个新数组，在这个地方就等价于返回了这个数组

let arr = [
1
, 
2
, 
3
]

渲染的也就是这个数组。

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

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

1.在jsx渲染中

如果这个变量是一个数组，则会展开这个数组的所有成员.

var arr = [
      
Hello world!
,
      
React is awesome
,
    ];
    ReactDOM.render(
      
{arr}
,
      document.getElementById('example')
    );

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

2.array.map().

        { 
            arr.map(function(val){ 
                return 
{val}
            })

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

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

{newArray}

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

因为forEach()没有返回值

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。