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

最新推荐文章于 2023-11-27 14:17:33 发布
最新推荐文章于 2023-11-27 14:17:33 发布
阅读量2.7k 收藏 4
点赞数 2
分类专栏： react知识 文章标签： js reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44867717/article/details/112343133
版权

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

显示同上

viceen
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
reactdelayedlist延迟列表渲染React组件
08-11
react-delayed-list: 延迟列表渲染React组件
jsx-for-web-components：WIP：基本的JSX工厂，用于利用Web组件的项目中
02-06
jsx-for-web-components WIP：基本的JSX工厂，可用于利用项目 产品特点 准备好 支持 要求 可以将JSX转换为JSX工厂JavaScript调用的编译器 安装 yarn add jsx-for-web-components 入门 我们将使用TypeScript和为浏览器进行构建。 让我们从引入一些依赖关系开始： yarn add --dev typescript rollup rollup-plugin-node-resolve rollup-plugin-typescript2 几个配置文件可帮助项目正确构建： ./tsconfig.json { " c
tslint-react：与TSLint的React＆JSX相关的Lint规则
02-06
tslintReact 与React＆JSX相关的Lint规则。 用法 tslint-react对TSLint和TypeScript具有同级依赖。 要将这些lint规则与默认预设一起使用，请通过extends关键字使用配置继承。 这是一个示例配置，其中tslint.json与node_modules文件夹相邻： { "extends" : [ "tslint:latest" , "tslint-react" ] , "rules" : { // override tslint-react rules here "jsx-wrap-multiline" : false
styled-jsx-plugin-sass:插件将Sass支持添加到styled-jsx
04-29
Thream / styled-jsx-plugin-sass 插件将支持添加到 。 :scroll: 关于 将与 :collision: 该存储库最初是从派生的，其目的不是为了功劳，而是从现在开始改进代码。 :floppy_disk: 安装 安装软件包和所需的node-sass （或 ）版本（它是对等依赖项）。 npm install --save-dev sass @styled-jsx/plugin-sass :gear: 用法 在babel配置（例如.babelrc.json ）中，将@styled-jsx/plugin-sass到styled-jsx的plugins中： { " presets " : [ [ " next/babel " , { " styled-jsx " : { " plugins " : [ " @styled-jsx/plugin-s
rich-text-to-jsx::page_facing_up:内容丰富的RTF文本字段类型的带有JSX渲染器
04-28
富文本到jsx 有意见的JSX渲染器，用于“字段类型 变更日志 rich-text-to-jsx受到markdown-to-jsx 。 值得注意的是，此软件包具有以下优点： 编译器提供的任何HTML标记（对应于节点类型）都可以被覆盖，以包括其他道具甚至完全是一个不同的React组件。 嵌入式条目和资产可以使用不同的组件来呈现，具体取决于它们是嵌入式，块还是超链接。 渲染功能可以定制。 所有这些时钟的压缩时间约为4 kB。 :warning: 需要React> = 16.0.0。 一些功能取决于特定的内容结构：条目和资产链接需要解析，并且内容必须本地化。 如果这对您而言是一个破坏交易的因素，请查看官方的rich-text-react-renderer程序包。 安装 使用您最喜欢的软件包管理器安装@madebyconnor/rich-text-to-jsx 。 # yarn yarn add @
JSX使用、写法
weixin_43993121的博客
11-29 626
```html <!DOCTYPE html> <lang lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0.
jsx的简化写法
jiaoqi6132的博客
07-11 680
1.state 2.类型要求写法 2.组件获取相应的数据 3.组件引入css 4.如何v-for 5.使用箭头函数 它没有自己的this,只有外围的this. 6.在这里还需要讲解一下,昨天state 父子之间没有讲清楚的一个东西就是 父亲设计好更新总state的数据的函数 子组件封装数据 子组件接受后,调用改函数,上传到state中 父组件执行函数,并且需要setstate 更新下状态 然后再次还需要setstat...
JSX 语法详解
web00_11的博客
11-14 9403
JSX即JavaScript XML。一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖，也是react.js的使用基础。React在不使用JSX的情况下一样可以工作，然而使用JSX可以提高组件的可读性，因此推荐使用JSX
React jsx规则JSX核心语法一 书写规范
SOLar7SysteM的博客
10-06 607
转换的方式有很多，比如toString方法、和空字符串拼接，String(变量)等方式；情况二：当变量是null、undefined、Boolean类型时，内容为空；情况一：当变量是Number、String、Array类型时，可以直接显示。比如UI中需要展示数据状态，在某些状态发生改变时，又需要改变UI；1.若首字母小写，那么React就会去寻找与之同名的html标签。/*1.jsx里面可以放入各种表达式，这里只是举例几个 */2. 若首字母大写，那么React就会去寻找与之同名的组件。
React之jsx遍历
Hiroshi's
09-08 635
react里面，数组可以自动被遍历 obj不能被遍历 {}花括号语法里面只能写js表达式，而不能写js语句 这样写： 改进：
styled-jsx-plugin-postcss:将PostCSS支持添加到Styled-jsx的插件
05-01
样式化的jsx-plugin-postcss 将与 :collision: :warning: 该插件未积极维护。 如果您希望我参与其中，请。 支持者 赞助此库工作的公司和个人： :1st_place_medal: 用法 首先安装此软件包。 npm install --save styled-jsx-plugin-postcss 接下来，在babel配置中将styled-jsx-plugin-postcss到styled-jsx的plugins中： { " plugins " : [ [ " styled-jsx/babel " , { " plugins " : [ " styled-jsx-plugin-postcss " ] }] ] } 使用配置： { " plugins " : [ [ " styled-jsx/babel " , { " plugins
手撕前端面试题【javascript~文件扩展名、分隔符、单向绑定、判断版本、深浅拷贝、内存泄露等】
qq_46906413的博客
09-26 2687
看完上面的例子你可能还是晕晕的，那么来详细的看看什么是深拷贝，什么是浅拷贝吧。js中的基础类型：string，number，boolean，null，undefined，symboljs中的引用类型：Object基础类型：是按照值 存放在栈中，占用的内存空间的大小是确定的，并由系统自动分配和自动释放。引用类型： 是按照地址 存在堆中，将存放在栈内存中的地址赋值给接收的变量。当我们想要访问引用类型的值的时候，需要先从栈中获得对象的地址指针，然后，在通过地址指针找到堆中的所需要的数据。
React基础1(jsx遍历展示，条件展示，样式展示，绑定表单)
最新发布
阿拉的神灯的博客
11-27 413
1.在旧的虚拟DOM中存在与新的虚拟DOM相同的key，则进行内容的比较。如果内容改变则生成新的真实DOM，否则使用原来的真实DOM。当数据发生变化时，react通过diff算法将新的虚拟DOM与旧的虚拟DOM进行比较，从而进行真实DOM的更新。如果列表内有输入的内容(例如input框)，后续操作破坏了原始顺序，以index作为key，就会产生错误DOM。2.在旧的虚拟DOM中不存在与新的虚拟DOM相同的key，则直接创建新的真实DOM。
JSX语法
menglong0329的博客
07-11 321
一、JSX语法介绍JSX不是一种语言，而是一种语法（语法糖）。JSX必须借助React运行环境。JSX标签就是Html标签，只不过我们在javascript中书协这些标签的时候，不用“”括起来。就和xml一样。转换：JSX语法能够让我们更加清晰的看到组件的DOM结构，不是直接在浏览器运行的，最终会转换成javascript去运行。JSX代码： ReactDOM.render( &lt;h1&...
React技术栈 --》 JSX语法书写JS和React创建组件 ## Day3
ztK63LrD的博客
06-19 953
带你深入了解React框架搭建，保姆级学习。
JSX语法使用
落日夕霞的博客
09-25 971
深入了解JSX 什么是JSX？ 事实上JSX就是React.createElement()方法的语法糖。 JSX的优点： JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。 它是类型安全的，在编译过程中就能发现错误。 使用 JSX 编写模板更加简单快速。 // JSX语法： &lt;MyButton color="blue" shadowSize={2}&gt;Clic...
vue的jsx写法记录
joyer
11-13 2550
通过本文, 你可以学到一些vue中jsx的语法。 vue更加推荐使用模板开发组件，但是在一些基础组件开发中，为了获取js的完全编程能力，不可避免需要使用一些jsx语法，而官方vue jsx对vue特有的语法糖这方面的文档特别少， 本文记录一些本人在开发过程中使用jsx的经验和思考。 整体上来看，由于vue的createElement跟react的createElement有区别,导致jsx的写法也有一些区别.但整体上还是符合react的jsx,react jsx进阶的语法。 如果需要了解vue jsx特.
Vue中列表循环渲染
qq_52207728的博客
06-02 1470
栗子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt
js中遍历对象的方法，jsx中实现
weixin_42802725的博客
12-23 798
for(let key in obj){…} 自动遍历每个属性 key为属性名 obj[key]可得对应属性值 结果如下： Object.keys(obj) //返回由所有属性名构成的数组 Object.values(obj) //返回由所有属性值构成的数组 使用Object.getOwnPropertyNames(obj) 返回一个数组，包含对象自身的所有属性（包含不可枚举属性） 遍历可以获取key和value const obj = { id..
JS中使用map方法遍历数组并渲染到页面中
06-01
可以使用`map`方法遍历数组并将其中的元素渲染到页面中。通常情况下，我们会使用模板字符串或者JSX语法来构建HTML代码。 下面是一个简单的例子，使用`map`方法遍历数组，并将其中的元素渲染到一个`ul`元素中： ```javascript const fruits = ['apple', 'banana', 'orange']; const list = document.createElement('ul'); fruits.map((fruit) => { const li = document.createElement('li'); li.textContent = fruit; list.appendChild(li); }); document.body.appendChild(list); ``` 在这个例子中，我们首先创建了一个空的`ul`元素，然后使用`map`方法遍历`fruits`数组，对于每一个元素，我们都创建一个`li`元素，并将其内容设置为当前元素的值，最后将`li`元素添加到`ul`元素中。最后，我们将`ul`元素添加到页面的`body`元素中。 当然，这只是一个简单的例子，实际中我们可能需要更加复杂的模板或者组件来渲染数组中的元素。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值