JSX列表渲染（五）——4种写法：基本写法 遍历写法 map遍历写法（常用-加工处理数组的每一项数据，最后形成一个新的数组） 列表遍历可以直接写到表达式中
2024-06-06 15:32:21
JSX列表渲染——4种写法：基本写法 & 遍历写法 & map遍历写法（常用-加工处理数组的每一项数据，最后形成一个新的数组） & 列表遍历可以直接写到表达式中
渲染多个元素
- 数组中可以放置JSX元素
key只在数组上下文中有含义
- 为了提高渲染性能
key在兄弟节点之间必须唯一
let arr = ['apple', 'orange', 'lemon', 'banana']
// let list = arr.map((item, index) => {// return <li key={index}>{item}</li>
// })let list = []
arr.forEach((item, index) => {list.push(<li key={index}>{item}</li>)
})let element = <ul>{list}</ul>
- JSX中可以嵌入map结构
// 不建议按照如下方式写，可读性比较低
let element = <ul>{arr.map((item, index) => <li key={index}>{item}</li>)}</ul>
文件结构
公共html文件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="./style/style.css"><!-- 第一步：引入相关js库文件 --><script type="text/javascript" src="./lib/react.development.js"></script><script type="text/javascript" src="./lib/react-dom.development.js"></script><!-- babel文件的作用：编译React代码，使之变成原生js代码才可以在浏览器中运行 --><script type="text/javascript" src="./lib/babel.min.js"></script>
</head><body><!-- 第二步：页面中需要提供一个容器 --><div id="root"></div><!-- 第三步：可以基于React实现前端功能 --><script type="text/babel" src="./js/06-JSX列表渲染.js"></script>
</body></html>
在VScode中，在VScode中打开，需安装插件Live Server，右键打开Open With Live Server,打开页面
实例01-基本写法-少量数据
js文件
/*JSX列表渲染
*///基本写法-少量数据
let data = ['tom', 'jerry', 'spike', 'kitty']let ul = (<ul><li>{data[0]}</li><li>{data[1]}</li><li>{data[2]}</li></ul>
)// let ul = []
// data.forEach(item => {// // 添加到数组中的是JSX元素
// ul.push(<li>{item}</li>)
// })// 数组中map的作用是：加工处理数组的每一项数据，最后形成一个新的数组
// 为了提高渲染性能，列表元素建议添加key属性，并保证他的值唯一
// let ul = data.map((item, index) => {// return <li key={index}>{item}</li>
// })
let element = <div>{ul}</div>// 列表遍历可以直接写到表达式中，但是可读性较差
// let element = <div>{data.map((item, index)=><li key={index}>{item}</li>)}</div>ReactDOM.render(element, document.getElementById('root'))显示
实例02-遍历写法
/*JSX列表渲染
*///基本写法-少量数据
let data = ['tom', 'jerry', 'spike', 'kitty']// let ul = (
// <ul>
// <li>{data[0]}</li>
// <li>{data[1]}</li>
// <li>{data[2]}</li>
// </ul>
// )//遍历写法
let ul = []
data.forEach(item => {// 添加到数组中的是JSX元素ul.push(<li>{item}</li>)
})// 数组中map的作用是：加工处理数组的每一项数据，最后形成一个新的数组
// 为了提高渲染性能，列表元素建议添加key属性，并保证他的值唯一
// let ul = data.map((item, index) => {// return <li key={index}>{item}</li>
// })
let element = <div>{ul}</div>// 列表遍历可以直接写到表达式中，但是可读性较差
// let element = <div>{data.map((item, index)=><li key={index}>{item}</li>)}</div>ReactDOM.render(element, document.getElementById('root'))显示
实例03-map遍历写法
js文件
/*JSX列表渲染
*///1、基本写法-少量数据
let data = ['tom', 'jerry', 'spike', 'kitty']// let ul = (
// <ul>
// <li>{data[0]}</li>
// <li>{data[1]}</li>
// <li>{data[2]}</li>
// </ul>
// )//2.0、遍历写法
// let ul = []
// data.forEach(item => {// // 添加到数组中的是JSX元素
// ul.push(<li>{item}</li>)
// })// 2.1、map写法
// 数组中map的作用是：加工处理数组的每一项数据，最后形成一个新的数组
// 为了提高渲染性能，列表元素建议添加key属性，并保证他的值唯一
let ul = data.map((item, index) => {return <li key={index}>{item}</li>
})
let element = <div>{ul}</div>// 列表遍历可以直接写到表达式中，但是可读性较差
// let element = <div>{data.map((item, index)=><li key={index}>{item}</li>)}</div>ReactDOM.render(element, document.getElementById('root'))显示结果同上
实例04-列表遍历可以直接写到表达式中
/*JSX列表渲染
*///1、基本写法-少量数据
let data = ['tom', 'jerry', 'spike', 'kitty']// let ul = (
// <ul>
// <li>{data[0]}</li>
// <li>{data[1]}</li>
// <li>{data[2]}</li>
// </ul>
// )//2.0、遍历写法
// let ul = []
// data.forEach(item => {// // 添加到数组中的是JSX元素
// ul.push(<li>{item}</li>)
// })// 2.1、map写法-常用
// 数组中map的作用是：加工处理数组的每一项数据，最后形成一个新的数组
// 为了提高渲染性能，列表元素建议添加key属性，并保证他的值唯一
// let ul = data.map((item, index) => {// return <li key={index}>{item}</li>
// })
// let element = <div>{ul}</div>// 3.0、列表遍历可以直接写到表达式中，但是可读性较差
let element = <div>{data.map((item, index)=><li key={index}>{item}</li>)}</div>ReactDOM.render(element, document.getElementById('root'))显示同上
JSX列表渲染（五）——4种写法：基本写法 遍历写法 map遍历写法（常用-加工处理数组的每一项数据，最后形成一个新的数组） 列表遍历可以直接写到表达式中相关推荐
- C语言一维数组的最大值和最小值依次放入一个新的数组中，依次类推
#include <stdio.h> #define N 9 void fun(int a[],int n) { int i,j,max,min,px,pn,t; for( ...
- 使用Python解决对比出两个Excel文件中的不同项并将结果重新写入一个新的Excel文件
使用Python解决对比出两个Excel文件中的不同项并将结果重新写入一个新的Excel文件 因为有统计成员到会情况的任务,每次汇总时都很麻烦,需要一个个对应腾讯会议导出名单的成员,然后在总表上进行标 ...
- C语言学习之将一个二维数组的行和列互换，存到另一个二维数组中
C语言学习之将一个二维数组的行和列互换,存到另一个二维数组中 #include <stdio.h> int main(){int a[2][3]={{1,2,3},{4,5,6}}; // ...
- 要求将数组中的0项去掉，将不为0的值存入一个新的数组，
package Day05;/*** 7.* 现在有如下一个数组:* int oldArr[]={1,3,4,5,0,0,6,6,0,5,4,7,6,7,0,5};* 要求将以上数组中的0项去掉,将不 ...
- java两个数组中不同的数字_java将两个数组中不同的数字去掉一个剩下的保存到一个新的数组中...
展开全部 package co; import java.util.Arrays; import java.util.HashSet; import java.util.Set; /** * java ...
- c语言二维数组输入数据,c语言编写程序，把下面的数据输入到一个二维数组中：...
c语言编写程序,把下面的数据输入到一个二维数组中: 答案:3 信息版本:手机版 解决时间 2019-10-07 01:08 已解决 2019-10-06 03:19 1． 编写程序,把下面的数据输入 ...
- 编写下面的函数合并两个有序列表构成一个新的有序列表： def merge(list1,list2): 编写测试程序提示用户输入两个有序列表，然后显式合并后的有序列表。
题目内容:编写下面的函数合并两个有序列表构成一个新的有序列表:def merge(list1,list2):编写测试程序提示用户输入两个有序列表,然后显式合并后的有序列表.要求:不允许使用系统提供的s ...
- mysql编程的二维数组_调出mysql中数据，输出一个二维数组的表格
1.使用DDL语句创建数据库.创建表. mysql> show databases; +--------------------+ | Database | +----------------- ...
- 两个数组中对应的下标的值合成一个新的数组_剑指 offer 面试题精选图解 03 . 数组中重复的数字
今天分享的题目来源于 LeetCode 上的剑指 Offer 系列 面试题03. 数组中重复的数字. 题目链接:https://leetcode-cn.com/problems/shu-zu-zhon ...
最新文章
- cherrypy 入门笔记(1) hello world
- VS2008 ,TFS2008破解序列号
- Qt C++中 Map 和 List 转换到 QML 中使用
- Pandas的学习(5.pandas中处理丢失数据和空值数据以及填充空值数据)
- cannot open file mfc42u.lib的问题解决
- 【Android 修炼手册】常用技术篇 -- Android 自定义 View
- python selenium 等待元素出现_Python Selenium等待加载几个元素
- Java 高级—— IO 基础
- 链表反转的两种实现方法，后一种击败了100%的用户！
- 安卓手机使用linux(含图形界面)——Aid Learning
- Ubuntu中MySQL的启动/关闭/重启
- matlab设计声音听听
- [教程]微信官方开源UI库-WeUI使用方法【申明：来源于网络】
- onvif学习笔记1：环境准备
- 巧用DictionaryTKey,TValue，完成客户需求
- ADI AD9371/9375+Xilinx ZC706 No-OS初始工程搭建 ——Vivado2019.2
- 利用C++求坐标系中两点间距离
- 基于FTP协议实现FTP客户端和服务端程序
- com.sun.mirror的jar包
- Android图文混排－实现EditText图文混合插入上传