❤React-JSX语法认识和使用

1、JSX基本使用​

JSX是React的核心 JSX是ES的扩展 jsx语法 -> 普通的JavaScript代码 -> babel

React可以使用JSX的前提和原因:

  1. React生态系统支持: 脚手架通常用于构建React应用程序,而JSX是React框架的核心语法之一。因此,脚手架默认支持JSX语法,以便更轻松地编写和管理React组件。
  2. 提高开发效率: JSX语法使得在JavaScript代码中编写类似HTML的结构更加直观和便捷,提高了开发者的开发效率和代码可读性。
  3. 组件化开发: JSX语法支持组件化开发,使得开发者可以将UI拆分为独立的组件,更好地组织和管理代码结构,提高了应用的可维护性和可扩展性。
  4. 工具支持: 脚手架通常配置了相应的编译器或转换工具(如Babel)来将JSX转换为浏览器可执行的纯JavaScript代码,使得开发者可以在开发阶段使用JSX语法,而不必担心浏览器的兼容性问题。

React JSX语法​

格外注意:

定义虚拟DOM,不要使用引号。

HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写,不仅方便了React应用程序的开发,还提高了开发效率和代码质量。

javascript


var names = ['Alice', 'Emily', 'Kate'];React.render(<div>{names.map(function (name) {return <div>Hello, {name}!</div>})}</div>,document.getElementById('example')
);

JSX 的基本语法规则:遇到 HTML 标签(以 < 开头),就用 HTML 规则解析; 遇到代码块(以 { 开头),就用 JavaScript 规则解析。

javascript


<div id="example"></div>
<script type="text/babel">var names = ['Alice', 'Emily', 'Kate'];ReactDOM.render(<div>{names.map(function(name,index){return <div className="zhan" key={index}>这是{index}:{name} </div>})}</div>,document.getElementById('example'));
</script>

注意:

document.getElementById('example') 背后不能添加; 这个符号

React的命名​

驼峰命名法​

想要在返回的div中添加类名:使用className="zhan"而不是class

使用calss会提示

js

Invalid DOM property `class`. Did you mean `className`?

JSX允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组,则会展开这个数组的所有成员。

特殊属性名​

1、React的属性名使用驼峰命名法2、特殊属性名:

class=> className
for=>  htmlFor
tabindex=>tabIndex

3、没有子节点的可以以/>结尾

4、推荐:使用小括号包裹JSX,从而避免自动插入分号陷阱

javascript

使用小括号包裹jsx
const div=(<div> hello jsx </div>)

对应的错误:​

(1)未使用驼峰命名法

image.png

javascript

var arr = [<h1>Hello world!</h1>,<h2>React is awesome</h2>,
];
React.render(<div>{arr}</div>,document.getElementById('example')
);> 案例:
<div id="example"></div>
<script type="text/babel">var names = [<span className="zhan" key="1">Alice</span>,<span className="zhan" key="2">Emily</span>];ReactDOM.render(<div>{names}</div>,document.getElementById('example'));
</script>

2、 JSX之中使用JavaScript表达式​

(1) JSX中嵌入javascript表达式​

javascript

const reactname='hello react 大雨';
const title=<h1>{reactname}</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(title);

(2) JSX的条件渲染​

1️⃣ 条件渲染 :​

if else 加载中以及加载完成效果

JS

const isloading=true;
const loadData=()=>{
if(isloading) {
return (<div>正在加载中.......</div>)
}
return (<div>欢迎你加载完成!</div>)
};
const title=(<h1className="h1titi">{loadData()}</h1>);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(title);
2️⃣ 三元表达式​

JS

const isloading=false;
const loadData=( )=>{
return isloading?(<div>正在加载中.......</div>):(<div>欢迎你加载完成!</div>);
}
const title=(<h1 className="h1titi">{loadData()}</h1>);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(title);
3️⃣ 逻辑与运算符​

逻辑与运算符是一种中断操作,比如下面的就是当前面成立的时候才执行,否则不执行

JS

const isloading=false;
const loadData=()=>{
return isloading&&(<div>正在加载中.......</div>);
const title=(<h1 className="h1titi">加载效果:{loadData()}</h1>);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(title);

(3) JSX的列表渲染​

map方法

JS

const Arr=[
{name:'11',value: '11'},
{name: '22',value:'2'},
{name: '333',value:'333'},
const list=(
<ul>
{Arr.map(item=><li>{item.name}</li>)}
</ul>
)
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(list);

随后我们发现会报错:

image.png

翻译过来的意思就是:

JS

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

加上key 属性唯一值,正确 同时需要注意的是:尽量避免使用索引号作为key值

JS

const list=(
<ul>
{Arr.map(item=><li
key={item.value};{item.name}</li>)}
</ul>

(4) JSX的样式处理​

1️⃣ 行内样式​

javascript

{Arr.map(item=
<li
style={{color:'red', backgroundColor:'cadetblue'}}
key={item.value}>{item.name}
</li>)}
2️⃣ 类名(className 推荐的方法)​

js

import React from 'react';
import ReactnoM from 'react-dom/client'; //React 18
import './index.css'  // 引入样式
const Arr=[{name:'11',value:'11'},{name:'22',value:'2'},{name: '333',value:'333'},
]// title 类名
const list=(
<ul>
{Arr.map(item=>
<li
className='title' !
key={item.value}>{item.name})
</li>
</ul>
)
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(list);

3、 JavaScript语句和表达式​

javascript

复制代码注意区分:【js语句(代码)】与【js表达式】
1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方下面这些都是表达式:
(1).a
(2).a+b
(3).demo(1)
(4). arr.map()
(5).function test(){}2.语句(代码):
下面这些都是语句(代码):
(1).if(){}
(2).for(){}
(3).switch(){case:xxxx}

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

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

相关文章

中文书籍对《人月神话》的引用(161-210本):微软的秘密

中文书籍对《人月神话》的引用&#xff08;第001到160本&#xff09;>> 《人月神话》于1975年出版&#xff0c;1995年出二十周年版。自出版以来&#xff0c;该书被大量的书籍和文章引用&#xff0c;直到现在热潮不退。 2023年&#xff0c;清华大学出版社推出《人月神话》…

【蓝桥等考C++真题】蓝桥杯等级考试C++组第13级L13真题原题(含答案)-最大的数

CL13 最大的数(20 分) 输入一个有 n 个无重复元素的整数数组 a&#xff0c;输出数组中最大的数。提示&#xff1a;如使用排序库函数 sort()&#xff0c;需要包含头文件#include 。输入&#xff1a; 第一行是一个正整数 n(2<n<20)&#xff1b; 第二行包含 n 个不重复的整…

DHCP与FTP

DHCP dhcp&#xff1a;动态主机配置的协议&#xff0c;应用在大型的局域网环境中 服务端和客户端 服务端&#xff1a;提供IP地址&#xff0c;某种特定功能的提供者 客户端&#xff1a;请求IP地址&#xff0c;请求对应的功能的使用者 服务端的端口号&#xff1a;67 客户端的端…

Spark 的容错机制:保障数据处理的稳定性与高效性

Spark 的介绍与搭建&#xff1a;从理论到实践_spark环境搭建-CSDN博客 Spark 的Standalone集群环境安装与测试-CSDN博客 PySpark 本地开发环境搭建与实践-CSDN博客 Spark 程序开发与提交&#xff1a;本地与集群模式全解析-CSDN博客 Spark on YARN&#xff1a;Spark集群模式…

【Qt-ROS开发】使用 Qt Creator 构建和编译含 ROS 库的 Qt 项目

【Qt-ROS】使用 Qt Creator 构建和编译含 ROS 库的项目 网上大多数办法是在 Qt creator中安装 ros_qtc_plugin 插件&#xff0c;项目以 ROS1 工作空间的形式构建&#xff0c;还是使用 catkin 来构建整个项目。但是这种方式局限很大&#xff0c;导入 Qt 的组件反而变得很麻烦&a…

彻底理解ARXML中的PDU

文章目录 一、DBC报文信号的发送二、ARXML报文信号的发送2.1 什么是PDU2.2 PDU的类型2.3 Container-I-PDU的发送 三、小结 在CANFD支持可变速率和更大的数据长度&#xff08;64字节&#xff09;的情况下&#xff0c;可以使用DBC和ARXML两种数据库格式来进行报文通信&#xff0c…

OpenGL【C++】台灯

#include<gl/glut.h> #include <math.h>/**************************************/ /* 设置灯旋转角度初始值和一些所用参数 */ /**************************************/ static GLfloat yrot -100.0; static GLfloat zrot 40.0; const GLfloat PI 3.141592…

初探鸿蒙:从概念到实践

一、鸿蒙开发的环境准备 开发工具&#xff1a;使用 DevEco Studio&#xff0c;支持 ArkTS 语法。 系统要求&#xff1a;确保计算机符合 DevEco Studio 的最低系统需求。安装步骤&#xff1a;下载 DevEco Studio&#xff0c;安装合适的 SDK 和模拟器 二、鸿蒙应用可以…

React Native 全新架构来了

React Native 0.76 现已在 npm 上以全新架构默认发布&#xff01; 在 0.76 版本的发布博客中&#xff0c;我们分享了此版本包含的一系列重大更改。在本文中&#xff0c;我们将概述全新架构以及它如何塑造 React Native 的未来。 全新架构全面支持现代 React 功能&#xff0c;…

git commit 校验

commitlint官方链接 1. npm install --save-dev commitlint/config-conventional commitlint/cli 2. 配置commitlint.config.cjs(项目根目录中&#xff09; module.exports {extends: [commitlint/config-conventional],rules: {type-enum: [2,always,[Feat, Fix, Doc, Style,…

vue2.x elementui 固定顶部、左侧菜单与面包屑,自适应 iframe 页面布局

vue elementui 固定顶部、左侧菜单与面包屑&#xff0c;自适应 iframe 页面布局 疑问点&#xff1a;iframe无法高度100%&#xff0c;如果写了100%就会有滚动条&#xff0c;所以只写了99.5% 【效果图】 路由示例 const routes [{title: Index,path: /,name: "Index"…

Coggle数据科学 | RAG编码模型对比:谁与OpenAI最为相似?

本文来源公众号“Coggle数据科学”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;RAG编码模型对比&#xff1a;谁与OpenAI最为相似&#xff1f; 在设计检索增强型生成&#xff08;RAG&#xff09;系统时&#xff0c;选择嵌入模型…

golang分布式缓存项目 Day1 LRU 缓存淘汰策略

注&#xff1a;该项目原作者&#xff1a;https://geektutu.com/post/geecache-day1.html。本文旨在记录本人做该项目时的一些疑惑解答以及部分的测试样例以便于本人复习。 LRU缓存淘汰策略 三种缓存淘汰策略 FIFO&#xff08;First In, First Out&#xff09;先进先出 原理&…

工业相机选取

1.相机分类&#xff1a; 1.1 在相机曝光方式中&#xff0c;全局曝光和卷帘曝光是两种主流技术。CCD相机通常采用全局曝光方式&#xff0c;而CMOS相机则可能采用卷帘曝光。 面阵相机与全局曝光关联与区别 关联&#xff1a;面阵相机可以使用全局曝光作为曝光方式&#xff0c;但…

如何查看电脑关机时间

要查看电脑的关机时间&#xff0c;可以按照以下步骤进行操作&#xff1a; 1. 打开事件查看器&#xff1a;按下键盘上的Windows键R键&#xff0c;然后在弹出的运行对话框中输入"eventvwr.msc"&#xff0c;并按下Enter键。 2. 在事件查看器窗口中&#xff0c;单击左侧窗…

jwt用户登录,网关给微服务传递用户信息,以及微服务间feign调用传递用户信息

1、引入jwt依赖 <dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt</artifactId><version>0.9.1</version></dependency> 2、Jwt工具类&#xff0c;生成token以及解析token package com.niuniu.gateway.uti…

SQL练习(2)

题源&#xff1a;牛客官网 选择题 假设创建新用户nkw&#xff0c;现在想对于任何IP的连接&#xff0c;仅拥有user数据库里面的select和insert权限&#xff0c;则列表语句中能够实现这一要求的语句是&#xff08;&#xff09; A grant select ,insert on *.* to nkw% B grant…

【MySQL从入门到放弃】InnoDB磁盘结构(一)

前言 从MySQL 5.5版本开始默认 使用InnoDB作为引擎&#xff0c;它擅长处理事务&#xff0c;具有自动崩溃恢复的特性&#xff0c;在日常开发中使用非常广泛。 下面是官方的InnoDB引擎架构图&#xff0c;主要分为内存结构和磁盘结构两大部分。 上一篇文章&#xff0c;我们解析了…

RT-DETR融合CVPR[2020]轻量化卷积模块Ghost Module模块

RT-DETR使用教程&#xff1a; RT-DETR使用教程 RT-DETR改进汇总贴&#xff1a;RT-DETR更新汇总贴 《GhostNet: More Features from Cheap Operations》 一、 模块介绍 论文链接&#xff1a;https://arxiv.org/abs/1911.11907 代码链接&#xff1a;GitHub - huawei-noah/Effici…

《TCP/IP网络编程》学习笔记 | Chapter 11:进程间通信

《TCP/IP网络编程》学习笔记 | Chapter 11&#xff1a;进程间通信 《TCP/IP网络编程》学习笔记 | Chapter 11&#xff1a;进程间通信进程间通信的基本概念通过管道实现进程间通信通过管道进行进程间双向通信 运用进程间通信习题&#xff08;1&#xff09;什么是进程间通信&…