React中遍历数组生成标签问题
短信预约 -IT技能 免费直播动态提醒
React遍历数组生成标签
举一个例子
一个列表根据数组渲染li元素，在vue中一个v-for就解决了，那在React中怎么实现呢？
这里我们直接引入的React文件，没用脚手架
let arr = [1,2,3];
ReactDOM.render(<ul>
{
arr.map(value => <li key={value}>{value}</li>)
}
</ul>,document.querySelector('#root'))但这里为什么用map方法呢，因为map会返回一个新数组，在这个地方就等价于返回了这个数组
let arr = [<li>1</li>, <li>2</li>, <li>3</li>]渲染的也就是这个数组。
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()没有返回值
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
