React中遍历数组生成标签问题
更新时间：2023年01月17日 08:42:46 作者：我叫胡八一
这篇文章主要介绍了React中遍历数组生成标签问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
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()没有返回值
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
React Hooks之使用useCallback和useMemo进行性能优化方式
这篇文章主要介绍了React Hooks之使用useCallback和useMemo进行性能优化方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
React 进入页面后自动 focus 到某个输入框的解决方案
React.js 当中提供了 ref 属性来帮助我们获取已经挂载的元素的 DOM 节点,你可以给某个 JSX 元素加上 ref属性,这篇文章主要介绍了React 进入页面以后自动 focus 到某个输入框,需要的朋友可以参考下2024-02-02
本文主要介绍了react实现组件状态缓存的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要介绍了React forwardRef用法,forwardRef允许你的组件使用ref将一个DOM节点暴露给父组件，本文结合案例分析给大家讲解的非常详细，需要的朋友可以参考下2023-06-06
在Rust中,Trait是一个核心概念,它允许我们定义类型应该具有的行为,本文就来具体介绍一下Rust中Trait的使用,感兴趣的可以了解一下,感兴趣可以了解一下2024-03-03
Redux是为javascript应用程序提供一个状态管理工具集中的管理react中多个组件的状态redux是专门作状态管理的js库（不是react插件库可以用在其他js框架中例如vue，但是基本用在react中），这篇文章主要介绍了react-redux及redux状态管理工具使用详解,需要的朋友可以参考下2023-01-01
React tabIndex使非表单元素支持focus和blur事件
这篇文章主要为大家介绍了React使用tabIndex使非表单元素支持focus和blur事件实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要为大家介绍了React ISR如何实现Demo详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
Redux是JavaScript状态容器，提供可预测化的状态管理，今天通过本文给大家分享redux在react中使用及配置redux到react项目中的方法，感兴趣的朋友跟随小编一起看看吧2021-06-06
这篇文章主要介绍了手把手教您实现react异步加载高阶组件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
最新评论