react18【系列实用教程】JSX (2024最新版)

为什么要用 JSX?

JSX 给 HTML 赋予了 JS 的编程能力

JSX 的本质

JSX 是 JavaScript 的语法扩展,浏览器本身不能识别,需要通过解析工具(如babel)解析之后才能在浏览器中运行。

bable 官网可以查看解析过程

在这里插入图片描述

JSX 的语法

{} 中写 JS 表达式

类似 vue 的 {{}}

渲染 JS 数据

对象

<div style={{ color: "red" }}>朝阳</div>

其他类型的数据也能直接渲染,但基本不会使用。

渲染变量

function Demo() {const name = "朝阳";return (<><div>{name}</div></>);
}export default Demo;

调用函数

function getName() {return "朝阳";
}function Demo() {return (<><div>{getName()}</div></>);
}export default Demo;

调用方法

<div>{new Date().getDay()}</div>

添加注释

{/* 我是一段注释 */}

条件渲染 if

类似 vue 的 v-if

单分支 ( && )

function Demo() {const showName = true;return <>{showName && <div>朝阳</div>}</>;
}

双分支( 三元运算符 ?: )

function Demo() {const login = false;return <>{login ? <div>朝阳</div> : <button>登录</button>}</>;
}

多分支( 调用内含 if 的函数 )

单分支和双分支也能使用,只是麻烦了些。

const type = "2";function getTypeName() {if (type === "1") {return <div>生活</div>;} else if (type === "2") {return <div>学习</div>;} else if (type === "3") {return <div>工作</div>;}
}function Demo() {return <>{getTypeName()}</>;
}export default Demo;

若分支特别多,也可以使用 Switch 语句。

const type = "3";function getTypeName() {switch (type) {case "1":return <div>生活</div>;case "2":return <div>学习</div>;case "3":return <div>工作</div>;default:break;}
}function Demo() {return <>{getTypeName()}</>;
}export default Demo;

列表渲染 map

类似 vue 的 v-for

  • 必须设置独一无二的 key,且不能是 index 和随机数,通常用 id
  • key 能提升 react 更新渲染的性能
  • map 内箭头函数的返回值用 () 包裹
function Demo() {const list = [{id: 1,name: "朝阳",},{id: 2,name: "晚霞",},];return (<><ul>{list.map((item) => (<li key={item.id}>{item.name}</li>))}</ul></>);
}export default Demo;
  • 朝阳
  • 晚霞

绑定事件

类似 vue 的 v-on (简写@)

  • 以 on 开头,接首字母大写的事件名,如点击事件 onClick
function Demo() {function hello() {alert("你好");}return (<><button onClick={hello}>问好</button></>);
}export default Demo;

获取事件对象 e

  • 此处的e 是一个React 定义的已解决了跨浏览器的兼容性问题的合成事件。(vue中是原生事件)
  • 通过 e.nativeEvent 可获取原生事件
function Demo() {function hello(e) {console.log(e);}return (<><button onClick={hello}>问好</button></>);
}

自定义事件传参

需使用箭头函数,否则便是调用函数,会在页面加载时立马执行。

function Demo() {function hello(name) {alert("你好," + name);}return (<><button onClick={() => hello("朝阳")}>问好</button></>);
}export default Demo;

此时要想获取事件对象 e,需在箭头函数传入参数e

function Demo() {function hello(name, e) {console.log("你好," + name);console.log(e);}return (<><button onClick={(e) => hello("朝阳", e)}>问好</button></>);
}export default Demo;

添加样式

行内样式【不推荐】

<div style={{ color: "red" }}>你好</div>

类样式

  • 样式写在单独的(如与组件同名的)css 文件中
  • 通过 import 导入样式
  • 通过 className 属性添加样式,注意,不是 class

src\Demo.css

.red {color: red;
}

src\Demo.jsx

import "./Demo.css";const Demo = () => {return <div className="red">你好</div>;
};export default Demo;

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

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

相关文章

PCie协议之-TLP Header详解(一)

✨前言&#xff1a; 在PCIe通信过程中&#xff0c;事务层数据包&#xff08;Transaction Layer Packets&#xff0c;简称TLP&#xff09;扮演着非常重要的角色。TLP用于在设备之间传递数据和控制信息&#xff0c;它们是PCIe的基本信息传输单元。 TLP可分为几个部分&#xff0c…

打家劫舍问题(线性,环形

打家劫舍问题&#xff08;根据递推公式来初始化 偷i和不偷i两种情况 如果连成环&#xff0c;考虑首元素就不考虑尾元素&#xff0c;考虑尾元素就不考虑首元素 线性问题代码 class Solution {public int rob(int[] nums) {int lennums.length;int[] dpnew int[len];//记录最…

Redis缓存降级

当访问量剧增、服务出现问题&#xff08;如响应时间慢或不响应&#xff09;或非核心服务影响到核心流程的性能时&#xff0c;仍然需要保证服务还是可用的&#xff0c;即使是有损服务。系统可以根据一些关键数据进行自动降级&#xff0c;也可以配置开关实现人工降级。 缓存降级…

Windows Server 2022 环境下WEB和DNS服务器配置方法

目录 实验名称&#xff1a;WEB和DNS服务器配置实验目的实验原理&#xff1a;主要设备、器材&#xff1a;实验内容&#xff1a;配置本地WEB站点配置本地DNS服务器 实验名称&#xff1a;WEB和DNS服务器配置 实验目的 掌握 Windows Server 2022 环境下WEB服务器配置方法 掌握 Wi…

Idea 核心编程快捷键-简洁版

Idea 实际开发中必备的快捷键功能整理&#xff0c;欢迎补充。 如果由于Idea版本默认快捷键不对&#xff0c;建议自己根据功能谷歌一下。 编程时提速 功能WindowsMac记忆提示移除当前文件中的没有调用的类Ctrl Option O进入某个类里面Ctrl 左键单击Command 左键单击回到光…

C# 下载安装,使用OfficeOpenXml

下载安装OfficeOpenXml模块 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.IO; using System.Linq; using System.Reflection.Emit; using System.Text; using System.Text.RegularEx…

使用RESTful API构建 web 应用程序

RESTful API是一种基于HTTP协议的架构风格&#xff0c;用于设计网络应用程序的 API。它强调使用标准的HTTP方法&#xff08;如GET、POST、PUT和DELETE&#xff09;对资源进行操作&#xff0c;并使用统一的资源标识符&#xff08;URI&#xff09;来唯一标识每个资源。RESTful AP…

基于spingboot,vue线上辅导班系统

目录 项目介绍 图片展示 运行环境 获取方式 项目介绍 权限划分&#xff1a;用户&#xff0c;管理员 具有前后台展示&#xff0c;前台供用户使用&#xff1b;用户具有自己的后台&#xff0c;查看自己的老师课程等&#xff1b;管理员具有最大的权限后台。 用户&#xff1a…

set the environment variable `TF_ENABLE_ONEDNN_OPTS=0`

TF_ENABLE_ONEDNN_OPTS是配合log输出信息来用。 os.environ["TF_CPP_MIN_LOG_LEVEL"]的取值有四个&#xff1a;0&#xff0c;1&#xff0c;2&#xff0c;3&#xff0c;分别和log的四个等级挂钩&#xff1a;INFO&#xff0c;WARNING&#xff0c;ERROR&#xff0c;FATA…

代码随想录第七天打卡|454.四数相加II, 383. 赎金信 ,15. 三数之和 , 18. 四数之和

454.四数相加II Python class Solution:def fourSumCount(self, nums1: List[int], nums2: List[int], nums3: List[int], nums4: List[int]) -> int:nlen(nums1)res0Mapdefaultdict(int)for i in range(n):for j in range(n):Map[nums1[i]nums2[j]]1for i in range(n):fo…

第十三篇:智慧之网:深度探索关系型数据库的数学奥秘与实战技艺

智慧之网&#xff1a;深度探索关系型数据库的数学奥秘与实战技艺 1. 引言 1.1 数据时代的基石 在数字化的浪潮中&#xff0c;数据已成为新时代的石油&#xff0c;而关系型数据库则是这座数据矿藏的精炼厂。自E.F. Codd在1970年提出关系模型以来&#xff0c;关系型数据库以其坚…

Flink CDC 原理

简介 Flink CDC&#xff08;Change Data Capture&#xff09;是 Apache Flink 提供的一个变更数据捕获工具集。它可以监控数据库的变更&#xff0c;并将这些变更实时地以流的形式提供给下游系统&#xff0c;这些变更包括插入、更新和删除操作。 Flink CDC 适用于需要实时数据…

(Arcgis)python geopandas库分割shp属性表特定内容,批量导出shp文件

一、两个文件。实现目标&#xff1a;从1个shp文件&#xff0c;根据属性表内容提取成200个shp文件&#xff0c;文件名取自txt文本内容 shp文件&#xff08;要素1-200.shp&#xff09;&#xff1a;打开属性表前14项相同&#xff0c;后200项不相同。 ————任务目标&#xff1a…

【yolov8分类任务-全流程】【公开数据白内障-101:101例白内障手术的视频数据集】

文章目录 1.公开数据集1.1.白内障-101&#xff1a;数据集文件结构1.1.1.视频文件1.1.2.注释文件(1)videos.csv(2) phases.csv(3)annotations.csv 1.2. 数据处理1.2.1.抽帧脚本全部代码&#xff08;每行都有注释&#xff09;1.2.2.分类任务划分数据集脚本 2.yolov8分类任务训练2…

代码技巧: 类中同一个函数可以同时存在常函数版本和普通函数版本(c++)

在类中如果我们希望在常函数中修改某属性的值可以使用mutable来实现。 如果有下面的场景&#xff0c;假设我们有一个函数hobby()需要在非const的对象调用的时候&#xff0c;应该去修改内部的属性&#xff0c;在const修饰的对象调用的时候可以满足不修改内部的属性。 鉴于上面的…

effective python学习笔记_列表与字典

学习对序列做切片 实现了__getitem__类即可支持切片&#xff0c;实现了__setitem__类可支持切片赋值 切片时下标索引可以越界&#xff0c;但按下标访问元素不可以越界&#xff0c;会IndexError 可以通过切片赋值不相等数量元素实现元素添加或赋值 切片不建议同时提供起始下…

【Shell】Shell编程之函数

目录 1.Shell函数定义 2.Shell函数的作用 3.函数返回值 4.函数传参 5.函数变量的作用范围 案例 1.Shell函数定义 格式1 function 函数名 { 命令序列 } 格式2 函数名() { 命令序列 } 2.Shell函数的作用 使用函数可以避免代码重复 使用函数可以将大的工程分割为若…

2024OD机试卷-素数之积 (java\python\c++)

题目:素数之积 题目描述 RSA加密算法 在网络安全世界中无处不在,它利用了极大整数因数分解的困难度,数据越大,安全系数越高,给定一个 32 位正整数,请对其进行因数分解,找出是哪两个素数的乘积。 输入描述 一个正整数 num 0 < num < 2147483647 输出描述 如果…

供水设备数据采集

随着城市化进程的加快&#xff0c;供水系统作为城市基础设施的重要组成部分&#xff0c;其运行效率和稳定性直接关系到市民的日常生活。在这个信息化、智能化的时代&#xff0c;如何利用先进技术提升供水系统的管理水平&#xff0c;成为了摆在我们面前的重要课题。HiWoo Cloud平…

java+jsp+sql server 医院住院管理系统论文(二)

⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️ ➡️点击免费下载全套资料:源码、数据库、部署教程、论文、答辩ppt一条龙服务 ➡️有部署问题可私信联系 ⬆️⬆️⬆️​​​​​​​⬆️…