react之了解jsx

JSX(JavaScript XML)是React中的一种语法扩展,它允许在JavaScript代码中直接编写类似HTML的代码,使得组件的构建和维护变得更加直观和高效。以下是对JSX的详细解析:

一、JSX的基本概念

  1. 定义:JSX是一种JavaScript的语法扩展,它让我们可以在JavaScript中编写类似HTML的代码。这些代码在编译时会被转换为JavaScript对象。

  2. 用途:React主要使用JSX来描述用户界面。虽然React并不强制要求使用JSX,但它是React开发中的核心概念之一。

  3. 特性

    • JSX的语法与HTML非常相似,但存在一些差异。例如,在JSX中,所有的标签必须闭合,自闭合标签需要添加斜杠。
    • JSX中的属性名采用camelCase(小驼峰)命名,而不是HTML中的kebab-case(短横线命名)。例如,class变成了className,for变成了htmlFor。
    • JSX允许在标签内部使用大括号{}来嵌入JavaScript表达式。

二、JSX的使用

1、创建React元素:使用JSX语法可以方便地创建React元素。例如:

const element = <h1>Hello, JSX!</h1>;

2、渲染React元素:使用ReactDOM.render()方法可以将React元素渲染到页面中。例如:

ReactDOM.render(element, document.getElementById('root'));
在React 18及更高版本中,可以使用ReactDOM.createRoot()方法进行渲染:
ReactDOM.createRoot(document.getElementById('root')).render(element);

3、嵌入JavaScript表达式:在JSX中,可以使用大括号{}来嵌入JavaScript表达式。这些表达式会被计算并插入到HTML中。例如:

const name = 'React';
const element = <h1>Hello, {name}!</h1>;

4、条件渲染:可以使用JavaScript的条件操作符(如if/else、三元运算符、逻辑与运算符)来实现条件渲染。例如:

const isLoggedIn = true;
const element = isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>;

或者:

const unreadMessages = ['React', 'Re: React', 'Re:Re: React'];
const element = (<div><h1>Hello!</h1>{unreadMessages.length > 0 && <h2>You have {unreadMessages.length} unread messages.</h2>}</div>
);
5、列表渲染:可以使用数组的map()方法来渲染列表。在渲染列表时,应该为每个列表项添加一个唯一的key属性。例如:
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => <li key={number.toString()}>{number}</li>);
const element = <ul>{listItems}</ul>;
6、样式处理

行内样式:可以使用style属性来添加行内样式。样式值应该是一个对象,属性名采用camelCase。例如:
const divStyle = { color: 'blue', backgroundColor: 'lightgray' };
const element = <div style={divStyle}>Styled div</div>;
类名:可以使用className属性来添加类名。这与HTML中的class属性类似,但命名方式需要改为camelCase。例如:
const element = <div className="my-class">My Div</div>;

三、的注意事项

1、必须包含在单个父元素内:JSX表达式必须有一个父元素包裹。如果要返回多个元素,可以使用<div>或者React提供的<React.Fragment>来包裹。

2、JSX中的注释:在JSX中添加注释需要使用大括号和JavaScript注释语法。例如:

const element = (<div>{/* 这是一个注释 */}<h1>Hello, world!</h1></div>
);

3、避免(xss)注入攻击:React会自动对嵌入在JSX中的所有值进行转义,防止注入攻击。这意味着无法通过JSX插入恶意代码。例如:

const title = response.potentiallyMaliciousInput;
const element = <h1>{title}</h1>;
在上述代码中,即使title包含恶意代码,React也会将其转义为字符串,从而确保应用的安全。

四、JSX​​​​​​​的编译

Babel转译器会把JSX转换成一个名为React.createElement的方法调用。例如:

const element = <h1 className="greeting">Hello, world!</h1>;

会被转换为:

const element = React.createElement('h1',{ className: 'greeting' },'Hello, world!'
);

这个方法首先会进行一些避免bug的检查,之后会返回一个对象,这个对象被称为“React元素”。它代表所有显示在屏幕上的东西。React通过读取这些对象来构建DOM并保持数据内容一致。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/60830.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Rust开发一个命令行工具(一,简单版持续更新)

依赖的包 cargo add clap --features derive clap命令行参数解析 项目目录 代码 main.rs mod utils;use clap::Parser; use utils::{editor::open_in_vscode,fs_tools::{file_exists, get_file, is_dir, list_dir, read_file}, }; /// 在文件中搜索模式并显示包含它的行。…

自动化运维(k8s):一键获取指定命名空间镜像包脚本

前言&#xff1a;脚本写成并非一蹴而就&#xff0c;需要不断的调式和修改&#xff0c;这里也是改到了7版本才在 生产环境 中验证成功。 该命令 和 脚本适用于以下场景&#xff1a;在某些项目中&#xff0c;由于特定的安全或政策要求&#xff0c;不允许连接到你的镜像仓库。然而…

Python学习笔记(1)装饰器、异常检测、标准库概览、面向对象

1 装饰器 装饰器&#xff08;decorators&#xff09;是 Python 中的一种高级功能&#xff0c;它允许你动态地修改函数或类的行为。 装饰器是一种函数&#xff0c;它接受一个函数作为参数&#xff0c;并返回一个新的函数或修改原来的函数。 语法使用 decorator_name 来应用在…

软件设计师-计算机体系结构分类

计算机体系结构分类 Flynn分类法 根据不同的指令流数据流组织方式分类单指令流但数据流SISD,单处理器系统单指令多数据流SIMD&#xff0c;单指令流多数据流是一种采用一个控制器来控制多个处理器&#xff0c;同时对一组数据&#xff08;又称“数据矢量”&#xff09;中的每一…

时序数据基础TDEngine

时序数据基础 什么是时序数据&#xff1f;​ 时序数据&#xff0c;即时间序列数据&#xff08;Time-Series Data&#xff09;&#xff0c;它们是一组按照时间发生先后顺序进行排列的序列数据。日常生活中&#xff0c;设备、传感器采集的数据就是时序数据&#xff0c;证券交易…

IntelliJ+SpringBoot项目实战(七)--在SpringBoot中整合Redis

Redis是项目开发中必不可少的缓存工具。所以在SpringBoot项目中必须整合Redis。下面是Redis整合的步骤&#xff1a; &#xff08;1&#xff09;因为目前使用openjweb-sys作为SpringBoot的启动应用&#xff0c;所以在openjweb-sys模块的application-dev.yml中增加配置参数&…

Docker在微服务架构中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 Docker在微服务架构中的应用 Docker在微服务架构中的应用 Docker在微服务架构中的应用 引言 Docker 基本概念 1. 容器 2. 镜像 3…

【UGUI】Unity 游戏开发:背包系统初始化道具教程

在游戏开发中&#xff0c;背包系统是一个非常常见的功能模块。它允许玩家收集、管理和使用各种道具。今天&#xff0c;我们将通过一个简单的示例来学习如何在 Unity 中初始化一个背包系统。我们将使用 Unity 2021.3.7 版本&#xff0c;并结合 C# 脚本来实现这一功能。 1. 场景…

JavaScript 自动化软件:AutoX.js

<div id"content_views" class"htmledit_views" deep"6"><p></p>

AI工业大模型报告:体系架构、关键技术与典型应用

研究意义 随着新一代人工智能的发展, 大模型&#xff08;如 GPT-4o 等&#xff09;凭借大规模训练数据、网络参数和算 力涌现出强大的生成能力、泛化能力和自然交互能力, 展现出改变工业世界的巨大潜力. 尽管大模型 已在自然语言等多个领域取得突破性进展, 但其在工业应用中的…

电子电气架构 --- 电动汽车 800V 高压系统

我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 所有人的看法和评价都是暂时的&#xff0c;只有自己的经历是伴随一生的&#xff0c;几乎所有的担忧和畏惧…

如何从docker-hub下载镜像

前提 系统环境&#xff1a;ubutnu 已经有梯子代理 系统环境ubutnu 安装docker在docker-hub注册账号&#xff0c;需要登录后才能下载镜像sudo docker login&#xff0c;会提示输入docker-hub的用户名和密码&#xff0c;成功后会提示success。否则会提示 Error response from d…

shell编程之变量与引用

目录 深入认识变量什么是变量变量的名称变量数据类型变量的定义自定义变量环境变量位置变量 变量赋值和作用域赋值&#xff1a;变量名变量值read从键盘读入变量值变量和引号变量的作用域变量的运算 深入认识变量 什么是变量 变量是在程序中保存用户数据的一段内存存储空间&am…

UE5 材质里面画圆锯齿严重的问题

直接这么画圆会带来锯齿&#xff0c;我们对锯齿位置进行模糊 可以用smoothstep&#xff0c;做值的平滑过渡&#xff08;虽然不是模糊&#xff0c;但是类似&#xff09;

鸿蒙HarmonyOS开发:一次开发,多端部署(工程级)三层工程架构

文章目录 一、工程创建1、先创建出最基本的项目工程。2、新建common、features、 products 目录 二、工程结构三、依赖关系1、oh-package.json52、配置ohpm包依赖 四、引用ohpm包中的代码1、定义共享资源2、在common模块index文件中导出3、在phone模块oh-package.json5文件中引…

28-一些常见的内存问题

诊断内存状况 ● 查看各个节点的内存状况 GET _cat/nodes?vGET _nodes/stats/indices?prettyGET _cat/nodesv&hname,queryCacheMemory,queryCacheEvictions,requestCacheMemory,requestCacheHitCount,request_cache.miss_countGET _cat/nodeshname,port,segments.memor…

【笔记】关于git和GitHub和git bash

如何推送更新的代码到github仓库 如何在此项目已经提交在别的远程仓库的基础上更改远程仓库地址&#xff08;也就是换一个远程仓库提交&#xff09; 如何删除github中的一个文件 第二版 删除github上的一个仓库或者仓库里面的某个文件_github仓库删除一个文件好麻烦-CSDN博客 …

20241112-Pycharm使用托管的Anaconda的Jupyter Notebook

Pycharm使用托管的Anaconda的Jupyter Notebook 要求 不要每次使用 Pycharm 运行 Jupyter 文件时都要手动打开 Anaconda 的 Jupyter Notebook 正文 pycharm中配置好会自动安装的&#xff0c;有的要自己配置 Pycharm中配置 文件 ——> 设置 ——> 语言和框架……&am…

集合的介绍与比较器的应用

1.集合&#xff1a; 是一种容器&#xff0c;一种变量类型&#xff0c;跟数组很像 数组的缺点&#xff1a; A.数组的空间长度固定&#xff0c;一旦确定不可以更改。多了浪费&#xff0c;少了报错。 B.使用数组 操作数据的时候&#xff0c;【删除&#xff0c;增加】效率比较低。…

动态规划---解决多段图问题

ok 小伙伴们&#xff0c;我现在有点小小的红温&#xff0c;有点毛躁。 怎么解决多段图问题呢&#xff1f;求取最短路径有多种方法可取。 家人们&#xff0c;毫无思绪可言……………………………… 要实现动态规划&#xff0c;条件&#xff1a;子问题重叠度较高&#xff0c;并…