React中的JSX

最新推荐文章于 2025-05-27 21:54:09 发布
原创 最新推荐文章于 2025-05-27 21:54:09 发布 · 1.3k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react.js #javascript #前端

本文详细介绍了React中的JSX，包括其基本使用、JavaScript表达式的嵌入、条件渲染和列表渲染，以及样式处理。JSX提供了声明式语法，使得代码更直观，与HTML结构相似，提升了开发效率。文中还探讨了为什么在脚手架中可以直接使用JSX，并提醒读者注意JSX与JavaScript的关系以及在实际应用中的最佳实践，如使用key属性和避免用索引作为key。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

1. JSX 的基本使用

1.1 createElement() 的问题

1.2 JSX 简介

1.3 使用步骤

1.4 小结 ：

1.5 思考： 为什么脚手架中可以使用JSX 语法？

1.6 注意点

2. JSX 中使用 JavaScript 表达式

2.1 嵌入 JS 表达式

2.2 注意点

3. JSX 的条件渲染 

4. JSX 的列表渲染 

5. JSX 的样式处理

1.行内样式 —— style

2.类名 —— className（推荐）

JSX总结： 总结

 

1. JSX 的基本使用

1.1 createElement() 的问题

1. 繁琐不简洁。
2. 不直观，无法一眼看出所描述的 结 构。
3. 不优雅，用户体验不爽。

 

 

1.2 JSX 简介

JSX 是 JavaScript XML 的简写，表示在 JavaScript 代码中写 XML（HTML） 格式的代码。

优势：声明式语法更加直观、与HTML结构相同，降低了学习成本、提升开发效率

JSX 是 React 的核心内容。 

 

1.3 使用步骤

1. 使 用 JSX 语法创 建 react 元素 
// 使用 JSX 语法，创建 react 元素：

const title = <h1>Hello JSX</h1>

2. 使 用 ReactDOM.render() 方法渲 染 react 元素到页面中 
// 渲染创建好的React元素

ReactDOM.render(title, root)

 

1.4 小结 ：

1. 推荐使 用 JSX 语法创 建 React 元素
2. 写 JSX 就跟写 HTML 一样，更加直观 、 友好
3. JSX 语法更能体现 React 的声明式特点（ 描 述 UI 长什 么 样子）
4. 使用步骤： 
// 1 使用JSX创建react元素
const title = <h1>Hello JSX</h1>
// 2 渲染创react元素
ReactDOM.render(title, root)

 

1.5 思考： 为什么脚手架中可以使用JSX 语法？

1. JSX 不是标准的 ECMAScript 语法，它是 ECMAScript 的语法扩展。 

2. 需要使用 babel 编译处理后，才能在浏览器环境中使用。 

3.create-react-app 脚手架中已经默认有该配置，无需手动配置。

4. 编译 JSX 语法的包为 ： @babel/preset-react 。

 

1.6 注意点

1. React 元素的属性名使用驼峰命名法
2. 特殊属性名 ：class -> className 、for -> htmlFor 、 tabindex -> tabIndex 。
3. 没有子节点的 React 元素可以用 /> 结束 。
4. 推荐：使用 小括号包 裹 JSX ，从而避免 JS 中的自动插入分号陷阱。 

// 使用小括号包裹 JSX
const dv = (
    <div>Helo JSX</div>
)

 

2. JSX 中使用 JavaScript 表达式

2.1 嵌入 JS 表达式

数据存储 在 JS 中
语法 ： { JavaScript 表达式 }
注意：语法中 是 单大括 号 ，不是 双 大括号！ 
const name = 'Jack'
const dv = (
    <div>你好，我叫：？？？</div>
)
const name = 'Jack'
const dv = (
    <div>你好，我叫：{name}</div>
)

2.2 注意点

单大括 号 中可以使用任意 的 JavaScript 表达式
JSX 自身也是 JS 表达式
注意 ：JS 中的对象是一个例外，一般只会出 现 在 style 属性中
注意 ： 不能在{}中出现语 句 （比如 ：if/for 等） 
const h1 = <h1>我是JSX</h1>

const dv = (
    <div>嵌入表达式：{h1}</div>
)

3. JSX 的条件渲染 

场景 ：loading 效果
条件渲染：根据条件渲染特定 的 JSX 结构
可以使用 if/else 或 三元运算 符 或 逻辑与 运 算 符 来 实 现 
const loadData = () => {
    if (isLoading) {
        return <div>数据加载中，请稍后...</div>
    }
    return (
        <div>数据加载完成，此处显示加载后的数据</div>
    )
}

const dv = (
    <div>
        {loadData()}
    </div>
）

 

4. JSX 的列表渲染 

如果要渲染一组数据，应该使用数组的 map() 方法 

注意：渲染列表时应该添加 key 属性，key 属性的值要保证唯一

原则：map() 遍历谁，就给谁添加 key 属性

注意：尽量避免使用索引号作为key

const songs = [
    {id: 1, name: '痴心绝对'},
    {id: 2, name: '像我这样的人'},
    {id: 3, name: '南山南'},
]
const list = (
    <ul>
        {songs.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
)

5. JSX 的样式处理

1.行内样式 —— style

<h1 style={{ color: 'red', backgroundColor: 'skyblue' }}>
    JSX的样式处理
</h1>

2.类名 —— className（推荐）

<h1 className="title">
    JSX的样式处理
</h1>

JSX总结： 总结

1. JSX 是React 的核心内容。
2. JSX 表示在 JS 代码中写 HTML 结构，是 React 声明式 的 体现。
3. 使用 JSX 配合嵌入的 JS 表达式、条件渲染、列表渲染 ， 可以描 述 任 意 UI  结构。
4. 推荐使用 className 的方式给 JSX 添加样式。
5. React 完全利 用 JS 语言自身的能力来编写 UI， 而 不 是 造 轮 子 增强 HTML 功 能。

 

React 开发（四）：深入 JSX - 语法、特性与使用场景
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
10-29 1457
JSX 是一种语法糖，可以让开发者像写 HTML 一样构建 React 组件。它最终会被转译成调用，这也是 JSX 和 JavaScript 兼容的原因。// JSX 示例;// 转译后的代码");JSX 并不是必须的，但它让 React 代码的阅读性和编写体验更佳。接下来我们将深入探讨其语法和特性。本文介绍了 JSX 的基本语法和特点，解析了它的转译原理和常见使用场景。在 React 中，JSX 是一种强大的工具，它让代码结构更直观，同时支持动态内容渲染。
Vue转React中JSX小结
CherishTaoTao的博客
09-30 1415
JSX 是 React 的一个核心特性，它将 HTML 的声明性结构与 JavaScript 的编程能力结合起来，允许开发者在构建用户界面时使用更灵活、更强大的表达方式。作为 Vue3 开发者，你可能会感受到 JSX 和 Vue 模板语法的差异，但随着对 JavaScript 表达式的理解加深，你会发现 JSX 的灵活性和可编程性为复杂交互提供了强大支持。
React 之 JSX
z1617433467的博客
07-19 1097
万物始于 jsx，想要深入学习 react ，就应该从 jsx 入手。弄清楚 jsx ，方便学习掌握以下内容： 了解常用的元素会被 React 处理成什么，有利于后续理解 react fiber 类型； 理解 jsx 的编译过程，方便操纵 children、控制 React 渲染，有利于便捷使用 React 插槽组件。......
React JSX语法介绍（JS XML）（一种JS语法扩展，允许在JS代码中编写类似HTML的标记语言）Babel编译
最新发布
Dontla的博客
05-27 1222
JSX（JavaScript XML）是Facebook开发的一种JavaScript语法扩展，它允许在JavaScript代码中编写类似HTML的标记语言。作为React生态系统的核心组成部分，JSX为开发者提供了一种更直观、更声明式的方式来描述用户界面。JSX本质上是一种语法糖，它将类HTML的语法转换为JavaScript函数调用。当编写JSX代码时，实际上是在创建React元素的描述，这些描述最终会被转换为虚拟DOM。
React
林清溯
08-29 401
一、React简介: 1.React概述： React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。 React 拥有较高的性能，代码逻辑非常简...
react中JSX详解
哈哈hyc的博客
08-26 1191
什么是JSX JSX是JavaScript XML,是React提供的Syntax Sugar, 能让我们可以在JS中写html标记语言。 其表现是如何： 常规的html代码都可以写，可以通过{props}往html中插入变量或任意有效的JS表达式，而无须加上$ 此外还可以插入带参数的函数{func(props)} <h1>Hello, {getName(props)}&lt...
vite-plugin-react-jsx:一个Vite插件，增强了React的jsx转换
05-11
vite-plugin-react-jsx 这是的插件，与React一起使用时可增强jsx的转换。 在开发模式下，它将在开发模式下添加调试信息，以便React Devtools（和其他工具）可以显示元素来自的文件名和行号，这在调试时非常有用。 ...
【React】在React中 JSX 代码如何转成 JS 代码？
pingan8787
10-24 1695
一、介绍 写 React 代码的朋友应该都是直接写 JSX 代码，JSX 让我们可以在 JS 中直接写 HTML 代码，可阅读性较高。本章节主要介绍 JSX 通过 babel 转换后会生成什么样式代码。 二、案例 div 标签 <div></div> 通过 babel 转换后： React.createElement("div", null); 带 id 属性的 ...
React学习之旅Part6：React中JSX的CSS样式(行内样式、封装样式、抽取样式表模块)、模块化解决css作用域问题、loader处理字体文件和scss和less
"✧treasure mountain✧"
06-09 3752
在React中 JSX的虚拟DOM组件同样可以设置样式 且设置方式与普通的写法大同小异 CSS样式有两种写法 分别为行内样式 和 封装样式 行内样式： 在JSX中 行内样式不能为style设置字符串格式的值 而是对象键值对类型的值 若出现连字符 则从第二个单词开始开头要大写 否则必须为字符串格式 在行内样式中 若是纯数值类型的样式 则可以不用引号进行包裹 但若为字符串类型的样式 则必须用引号包裹 例如： export default class Hello extends React.Component {
React中的JSX应该怎么用
zayyo的博客
06-21 730
JSX = Javascript + XML，JSX是一个 JavaScript 的语法扩展。JSX可以很好地描述 UI 应该呈现出它应有交互的本质形式并且其完全可以和JavaScript融合在一起使用。而且具有 JavaScript 的全部功能。JSX 可以生成 React “元素”。
React中关于JSX
w123452222的博客
08-19 286
JSX由react推广出来的一个js语法糖！ 在React项目中我们的组件中第一句话都是引用react， import React from 'react'; 但是在代码中却没有使用到，那它的作用是什么呢？ 浏览器只认识html css js语言，其他的格式语言最后都需要转成这3种之一的 在React中使用JSX语法糖写代码时，最后还是会被编译成js的 &lt;div classNam...
react中JSX的介绍
GZZ__z的博客
11-05 309
一，首先，createElement的效率太低了，太繁琐，不够直观 所以就引出了JSX，jsx是什么？ JSX：是 JavaScript XML的缩写 在 JS 代码中书写 XML 结构，JSX 不是标准的 JS 语法，是 JS 的语法扩展。脚手架内置了babel编译包，React用它来创建 UI（HTML）结构 简单理解：我们之前用html写页面，现在是用jsx来写页面 代码： // 导入react和react-dom import React from 'react' import ReactDO
学习React，从攻克JSX开始
weixin_34146986的博客
09-04 201
详情参考官方JSX规范 虽然JSX是扩展到ECMAScript的类XML语法，但是它本身并没有定义任何语义。也就是说它本身不在ECMAScript标准范围之内。它也不会被引擎或者浏览器直接执行。通常会利用很编译器预处理器来将这些JSX转化为标准的ECMAScript。 吐槽：虽然JSX出发点是好的，而且写起来也很简单，但是对于要在JS中写类HTML格式的内容，我的内心是排斥的，感觉非常不习惯。...
【React】JSX：从基础语法到高级用法的深入解析
lph159的博客
07-24 2605
JSX（JavaScript XML）是一种语法扩展，它让我们可以在 JavaScript 中编写类似 HTML 的代码。它与 JavaScript 紧密结合，并在编译时被转换为 JavaScript 对象。
[React]JSX的用法
FreeeLinux's blog
12-09 667
什么是JSX 基于ECMAScript的一种新特性 一种定义带属性树结构的语法 非DOM属性介绍非DOM属性: dangerouslySetInnerHTML、ref、key dangerouslySetInnerHTML: 在JSX中直接插入HTML代码 ref: 父组件引用子组件 key: 提高渲染性能 React diff算法Created with Raphaël 2.1.0开始节点相同自定
一.React之 JSX简介
weixin_44828588的博客
07-08 302
为什么使用 JSX？ React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。 React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。我们将在后面章节中深入学习组件。如果你还没有适应在 JS 中使用标记语言，这个会议讨论应该可以说服你。 React不强制要求使用 JSX，但是大多数人发现，在.
React教程：JSX语法基础
柯晓楠
02-15 439
1、基本概念： React 使用 JSX 来替代常规的JavaScript。 JSX 是按照 XML 语法规范 的 JavaScript 语法扩展。 JSX 语法的本质：并不是直接把 JSX 渲染到页面上，而是内部先转换成了 createElement 形式，再渲染的。 2、 JSX 的优点： JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化； 它是类型安全的，在编译过...
First-JSX：React中JSX首个实现的深入探索
资源摘要信息:"First-JSX:JSX的第一个React实现" 知识点一：React基本概念和Create React App入门 React是由Facebook开发的用于构建用户界面的JavaScript库。它遵循组件化原则，使得开发者可以构建大型应用的用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

努力学习前端的小陈

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值