当前位置： 首页 > news >正文

React的jsx的用法

news 2026/5/13 3:51:45

React是一个流行的JavaScript库，用于构建用户界面。它使用一种名为JSX的语法扩展来描述组件的结构和样式。JSX是React的核心语言之一，它允许开发人员在JavaScript中编写HTML，从而使代码更加简洁和易于阅读。

JSX是一种语法扩展，它允许开发人员在JavaScript中编写类似于HTML的代码。它使用类似XML的标记来描述组件的结构和样式。例如，下面是一个简单的JSX组件：

const MyComponent = () => {return (<div><h1>Hello, World!</h1><p>This is a JSX component.</p></div>);
};

在这个例子中，我们定义了一个名为MyComponent的函数组件，它返回一个包含HTML标记的JSX元素。这个元素包含一个<div>标记，其中包含一个<h1>标记和一个<p>标记。这些标记被称为“元素”，它们可以包含属性和子元素。

JSX的语法非常类似于HTML，但有一些重要的区别。首先，JSX元素必须使用尖括号< >来包围。其次，JSX属性必须使用双引号"来包围。最后，JSX元素必须以分号;结尾。

除了HTML标记外，JSX还支持JavaScript表达式。这意味着我们可以在JSX中使用变量、函数和算术运算符等JavaScript语法。例如，下面是一个使用JavaScript表达式的JSX组件：

const MyComponent = () => {const name = "John";const age = 30;return (<div><h1>Hello, {name}!</h1><p>You are {age} years old.</p></div>);
};

在这个例子中，我们定义了两个变量name和age，然后在JSX中使用它们来显示用户的姓名和年龄。我们使用花括号{ }来将JavaScript表达式嵌入到JSX中。

JSX还支持JavaScript的条件语句和循环语句。例如，下面是一个使用条件语句的JSX组件：

const MyComponent = ({ isLoggedIn }) => {return (<div>{isLoggedIn ? (<p>Welcome back!</p>) : (<p>Please log in.</p>)}</div>);
};

在这个例子中，我们定义了一个名为isLoggedIn的属性，它表示用户是否已登录。然后，我们使用条件运算符? :来根据用户是否已登录显示不同的消息。

JSX还支持JavaScript的循环语句。例如，下面是一个使用循环语句的JSX组件：

const MyComponent = ({ items }) => {return (<ul>{items.map((item) => (<li key={item.id}>{item.name}</li>))}</ul>);
};

在这个例子中，我们定义了一个名为items的属性，它是一个包含多个对象的数组。然后，我们使用Array.map()方法来遍历数组，并为每个对象创建一个<li>元素。我们还使用key属性来指定每个元素的唯一标识符，以提高性能。

jsx的{}能够放什么—表达式—值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--使用react的环境--><script src="./js/babel.min.js"></script><script src="./js/react.development.js"></script><script src="./js/react-dom.development.js"></script><!--babel的作用就是把 react的语法转为 js语言react-dom的作用就是把 虚拟dom转为domreact.development 开发环境下的react源码-->
</head>
<body>
<!--真是的dom-->
<div id="app"></div><script type="text/babel">let classNameVal = "content"let text="刘明飞快的在回你眼前的这个未婚妻是什么情况"function add(){return "真的让人无法自拔啊!!!"}let list=["心海","甘雨","艳菲","八重"]let VDOM = (<div className={classNameVal}><p style={{color:"red",fontSize:"29px"}}>你好{classNameVal}</p><img src="./1.jpg" alt="" width="239" height="159"/>{//这里是注释/*多行注释多行注释* */}<p>{text}</p><p>{text+"看着他布灵布灵的大眼睛"}</p><p>{add()}</p><div>我的老婆们:{list.map(ele=>{return <h2>{ele}</h2>})}</div></div>)ReactDOM.render(VDOM, document.querySelector("#app"))/*在 {} 里能写什么   ---表达式---也就是值js代码 和 js表达式a. 表达式: 一个表达式会产生一个值，可以在任意需要值的地方 使用aa+520fn()list.mapb. 流程控制语句ifforswitch*/
</script></body>
</html>

总之，JSX是一种非常强大和灵活的语法扩展，它使React开发人员能够更轻松地编写和组织代码。通过使用JSX，我们可以将HTML、JavaScript和CSS等不同类型的代码组合在一起，从而创建出美观、灵活和易于维护的用户界面。

相关文章：

React的jsx的用法

React是一个流行的JavaScript库&#xff0c;用于构建用户界面。它使用一种名为JSX的语法扩展来描述组件的结构和样式。JSX是React的核心语言之一&#xff0c;它允许开发人员在JavaScript中编写HTML&#xff0c;从而使代码更加简洁和易于阅读。 JSX是一种语法扩展&#xff0c;它…...

编程日记 2023/9/11 20:34:42

Ei Scopus检索 | 2024年第四届能源与环境工程国际会议(CoEEE 2024)

会议简介 Brief Introduction 2024年第四届能源与环境工程国际会议(CoEEE 2024) 会议时间&#xff1a;2023年5月22日-24日 召开地点&#xff1a;意大利米兰 大会官网&#xff1a;www.coeee.org CoEEE 2024将围绕“能源与环境工程”的最新研究领域而展开&#xff0c;为研究人员、…...

编程日记 2023/9/11 20:33:41

习题练习 C语言（暑期第四弹）

自我小提升&#xff01; 前言一、数组二、指针运算三、统计每个月兔子的总数四、双指针的应用五、判断指针六、珠玑妙算七、两数之和八、数组下标九、指针十、寻找峰值十一、二级指针十二、大端小端十三、无符号参数十四、数对十五、截取字符串总结 前言 重要的事说三遍&#…...

编程日记 2023/9/11 20:32:39

【docker快速部署微服务若依管理系统（RuoYi-Cloud）】

工作原因&#xff0c;需要一个比较完整的开源项目测试本公司产品。偶然发现RuoYi-Cloud非常适合&#xff0c;它有足够多的中间件&#xff0c;而且官方提供docker安装&#xff0c;但我本人在安装过程中遇到了很多坑&#xff0c;在这里记录一下防止下次会再次遇到。 项目地址 ht…...

编程日记 2023/9/11 20:31:39

面试求职-简历编写技巧

没有高水平简历 只有高匹配的简历 试问一下&#xff1a;如果一个非常牛逼的软件工程的硕士&#xff0c;投递市场营销岗位&#xff0c;结果会是什么样呢&#xff1f; 这位同学大概率没办法通过简历。 不是因为他不够优秀&#xff0c;而是因为简历和岗位不够匹配。 在公司的招…...

编程日记 2023/9/11 20:30:37

云原生安全性：构建可信任的云应用的最佳实践

文章目录 云原生安全性的重要性1. 数据隐私2. 恶意攻击3. 合规性要求4. 业务连续性 构建可信任的云应用的最佳实践1. 安全开发2. 身份验证与授权3. 容器安全性4. 监控与审计5. 持续集成与持续交付&#xff08;CI/CD&#xff09;6. 安全培训和教育 未来趋势&#xff1a;服务网格…...

编程日记 2023/9/11 20:29:36

第一章 数据库SQL-Server(及安装管理详细)

❄️作者介绍&#xff1a;奇妙的大歪❄️ &#x1f380;个人名言&#xff1a;但行前路&#xff0c;不负韶华&#xff01;&#x1f380; &#x1f43d;个人简介&#xff1a;云计算网络运维专业人员&#x1f43d; 前言 21 世纪&#xff0c;人类迈入了“信息爆炸时代”&#xff0c…...

编程日记 2023/9/11 20:28:34

chrome extension无法获取window对象

背景见上一篇博客修改网页内容的方法 上一篇博客之后&#xff0c;我要修改的网页有一个新改版&#xff0c;然后有个数据存在了window中&#xff0c;我直接在js中使用window.xxx发现无法获取。所以有本文。 https://juejin.cn/post/7145749643316428830 https://onelinerhub.com…...

编程日记 2023/9/11 20:27:33

在linux虚拟机上安装docker（我的实践）

参考文章&#xff1a; https://blog.csdn.net/qq_29479041/article/details/82659218 步骤&#xff1a; 1.安装docker 参考文章&#xff1a; https://blog.csdn.net/qq_29479041/article/details/82659218 https://blog.csdn.net/qq_38345468/article/details/110128659 2.…...

编程日记 2023/9/11 20:26:31

Spring之事务开发

什么是事务&#xff1f; 事务是指数据库管理系统中的一个执行单位或一个逻辑工作单元&#xff0c;它由一个或多个数据库操作序列组成。事务具有以下四个特性&#xff0c;通常被称为ACID特性&#xff1a; 原子性&#xff08;Atomicity&#xff09;&#xff1a;事务是一个不可分…...

编程日记 2023/9/11 20:25:30

干了三年的功能测试，让我女朋友跑了，太难受了...

简单概括一下 先说一下自己的情况&#xff0c;普通本科&#xff0c;19年通过校招进入深圳某软件公司&#xff0c;干了3年多的功能测试&#xff0c;21年的那会&#xff0c;因为大环境不好&#xff0c;我整个人心惊胆战的&#xff0c;怕自己卷铺盖走人了&#xff0c;我感觉自己不…...

编程日记 2023/9/11 20:24:29

JavaScript函数的使用

前言 程序中的foo、bar、baz 在学习编程的过程中&#xff0c;你可能会经常看到foo、bar、baz这些名词&#xff1a; 它们通常被用来作为函数、变量、文件的名词&#xff1b;目前已经编程了计算机编程的术语一部分&#xff1b;但是它们本身并没有特别的用途和意义&#xff1b;…...

编程日记 2023/9/11 20:23:29

【算法】Java-使用数组模拟单向链表，双向链表

目录 试题1&#xff1a;实现一个单链表&#xff0c;并实现以下功能&#xff1a; 试题2&#xff1a;实现一个双链表&#xff0c;并实现以下功能 思路总结&#xff1a; 什么情况下可能涉及到用数组实现链表呢&#xff1f; 在学习时了解到了可以用数组模拟链表&#xff0c;使其…...

编程日记 2023/9/11 20:22:27

Nessus简单介绍与安装

Nessus简单介绍与安装 1.Nessus简介 Nessus号称是世界上最流行的漏洞扫描程序&#xff0c;全世界有超过75000个组织在使用它。该工具提供完整的电脑漏洞扫描服务&#xff0c;并随时更新其漏洞数据库。Nessus不同于传统的漏洞扫描软件&#xff0c;Nessus可同时在本机或远端上遥…...

编程日记 2023/9/11 20:21:26

【每天一道算法题】day2-认识时间复杂度

认识时间复杂度&#xff1a; O&#xff1a;读作big O&#xff0c;在数学上指的是上限的意思 常数时间的操作 一个操作如果和样本的数据量没有关系&#xff0c;每次都是固定时间内完成的操作&#xff0c;叫做常数操作。时间复杂度为一个算法流程中&#xff0c;常数操作数量的一…...

编程日记 2023/9/11 20:20:24

前端报错合集

error Component name “index“ should always be multi-word vue/multi-word-component-names 的解决办法 原因组件命名是 没有采用驼峰 error Component name “index“ should always be multi-word vue/multi-word-component-names 的解决办法_error component name &qu…...

编程日记 2023/9/11 20:19:24

Milvus以及Web UI 安装

向量数据库懂的都懂 版本数据 [rootiZ7xv7q4im4c48qen2do2bZ project]# cat /etc/redhat-release CentOS Stream release 9 [rootiZ7xv7q4im4c48qen2do2bZ project]# docker version Client: Docker Engine - CommunityVersion: 24.0.5API version: 1.43Go v…...

编程日记 2023/9/11 20:18:22

Go for循环中的defer

背景 写个后台程序&#xff0c;定时抓取服务器指标&#xff0c;代码逻辑如下&#xff0c;使用一段时间后内存不断增加 func CollectInfo() {for {// 获取服务器信息代码// ...............resp, err : http.Post("http://server", "application/json", str…...

编程日记 2023/9/11 20:17:21

创建开机自启的脚本

在启动许多ros节点时有多种方式&#xff0c;我推荐使用launch来启动所有的节点&#xff0c;这也是一种规范的方式。以后会慢慢向这个方向靠。 除此之外还可以通过创建的脚本来启动&#xff1a; 脚本位置不限&#xff0c;只需要&#xff1a; sudo gedit xxx.sh在里面添加相应的…...

编程日记 2023/9/11 20:16:20

学生信息系统（python实现）

#codingutf-8 import os.path filenamestudent.txtdef menm():#菜单界面print(学生管理系统)print(-----------------------------功能菜单-----------------------------)print(\t\t\t\t\t\t1.录入学生信息)print(\t\t\t\t\t\t2.查找学生信息)print(\t\t\t\t\t\t3.删除学生信息…...

编程日记 2023/9/11 20:15:18

FPGA仿真库配置避坑指南：Xilinx 7系、Altera Cyclone V、Lattice ECP5在ModelSim 10.6d下的完整流程

FPGA仿真库配置避坑指南&#xff1a;Xilinx 7系、Altera Cyclone V、Lattice ECP5在ModelSim 10.6d下的完整流程 第一次在ModelSim 10.6d环境下配置FPGA仿真库时&#xff0c;我花了整整三天时间排查各种路径错误和权限问题。直到现在&#xff0c;我还清楚地记得那个深夜——当仿…...

编程新知 2026/5/13 2:17:28

Happy Island Designer完整指南：免费在线岛屿设计工具终极教程

Happy Island Designer完整指南&#xff1a;免费在线岛屿设计工具终极教程 【免费下载链接】HappyIslandDesigner "Happy Island Designer (Alpha)"&#xff0c;是一个在线工具&#xff0c;它允许用户设计和定制自己的岛屿。这个工具是受游戏《动物森友会》(Animal C…...

编程新知 2026/5/13 1:03:10

TEdit地图编辑器：10倍效率打造你的泰拉瑞亚梦想世界

TEdit地图编辑器&#xff1a;10倍效率打造你的泰拉瑞亚梦想世界 【免费下载链接】Terraria-Map-Editor TEdit - Terraria Map Editor - TEdit is a stand alone, open source map editor for Terraria. It lets you edit maps just like (almost) paint! It also lets you chan…...

编程新知 2026/5/12 23:11:53

三维动画课程期末复盘：从零搭建我的马卡龙童话游乐场✨

当我按下 3ds Max 的渲染按钮&#xff0c;看着浅蓝的摩天轮缓缓转动、粉白的旋转木马跟着节奏起舞、淡紫色热气球轻轻飘动时&#xff0c;我才真正意识到&#xff1a;为期一学期的三维动画课程&#xff0c;就这样在我的指尖落下了帷幕。从刚打开软件连工具栏都认不全的 “小白”…...

编程新知 2026/5/12 21:58:36

.NET 10 + CQRS + MediatR 一个跨平台文档管理系统

前言基于 .NET 10 打造的跨平台文档管理系统&#xff0c;才真正感受到了什么叫"专业级"的开源力量。它不仅仅是一个简单的文件存储工具&#xff0c;更是一个集成了 CQRS 架构、实时通信、版本控制等高级特性的现代化应用示例。项目介绍一款标准的前后端分离项目&…...

编程新知 2026/5/12 21:03:38

别再只会点灯了！用51单片机和继电器模块，做个智能插座控制台灯（附完整代码）

从点灯到智能家居&#xff1a;51单片机与继电器模块的实战进阶指南 当你已经能够熟练地用51单片机点亮LED灯时&#xff0c;是否想过将这些基础技能转化为实际生活中的实用工具&#xff1f;本文将带你跨越实验板与真实世界的鸿沟&#xff0c;用最常见的51单片机和继电器模块&…...

编程新知 2026/5/12 20:44:03

弯曲波触觉反馈技术：为触摸屏注入真实按键手感的工程实践

1. 项目概述&#xff1a;当触摸屏需要“手感”在2012年&#xff0c;如果你告诉一个家电设计师&#xff0c;未来的微波炉、冰箱或烤箱面板将是一块完全平整、没有任何物理凸起的玻璃或塑料板&#xff0c;他可能会皱起眉头。因为这意味着用户将失去最直接的交互反馈——那个“咔哒…...

编程新知 2026/5/12 19:32:47

3步精通MOOTDX：量化投资数据接口实战指南

3步精通MOOTDX&#xff1a;量化投资数据接口实战指南 【免费下载链接】mootdx 通达信数据读取的一个简便使用封装 项目地址: https://gitcode.com/GitHub_Trending/mo/mootdx MOOTDX是一个专为量化投资和数据分析设计的Python库&#xff0c;它提供了高效、便捷的通达信数…...

编程新知 2026/5/12 18:54:20

抖音无水印视频下载终极指南：5分钟快速掌握免费批量下载技巧

抖音无水印视频下载终极指南&#xff1a;5分钟快速掌握免费批量下载技巧 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback…...

编程新知 2026/5/12 17:18:59

RK3368安卓9.0固件烧录后开机卡Recovery？手把手教你调整分区表解决4GB闪存空间不足

RK3368安卓9.0固件烧录实战&#xff1a;4GB闪存分区优化全解析 当你满怀期待地将Android 9.0固件烧录到RK3368开发板&#xff0c;却发现设备直接进入了Recovery模式&#xff0c;屏幕上躺着那个令人沮丧的红色感叹号机器人——这可能是每个嵌入式开发者都经历过的"入门仪式…...

编程新知 2026/5/12 17:03:48