JSX列表渲染（五）——4种写法：基本写法 & 遍历写法 & map遍历写法（常用-加工处理数组的每一项数据，最后形成一个新的数组） & 列表遍历可以直接写到表达式中_jsx 遍历

作者：小蓝xlanll | 2024-04-27 02:49:47

踩

jsx 遍历

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>
1
2
3
4
5
6
7
8
9
10
11

JSX中可以嵌入map结构

// 不建议按照如下方式写，可读性比较低
let element = <ul>{arr.map((item, index) => <li key={index}>{item}</li>)}</ul>
1
2

文件结构

在这里插入图片描述

公共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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在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'))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

显示

在这里插入图片描述

实例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'))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

显示

在这里插入图片描述

实例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'))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

显示结果同上

实例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'))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

显示同上

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/494393