React-1-jsx基础-事件绑定-样式处理

一.JSX基础-概念和本质

1.1 什么是JSX

JSX是JavaScript和XML(HTML)的缩写,表示在JS代码中编写HTML模版结构,它是React中编写UI模版的方式

优势: 1. HTML的声明式模版写法 2. JS的可编程能力

JSX的本质:
JSX并不是标准的JS语法,它是JS的语法扩展,浏览器本身不能识别,需要通过解析工具做解析之后才能在浏览器中运行
在这里插入图片描述

1.2 JSX中使用JS表达式

在JSX中可以通过 大括号语法{} 识别 JavaScript中的表达式,比如常见的变量、函数调用、方法调用等等

  1. 使用引号传递字符串
  2. 使用JavaScript变量
  3. 函数调用和方法调用
  4. 使用JavaScript对象
	const count = 100function getName () {return 'jack'}function App () {return (<div className="App">this is App{/* 使用引号传递字符串 */}{'this is message'}{/* 识别js变量 */}{count}{/* 函数调用 */}{getName()}{/* 方法调用 */}{new Date().getDate()}{/* 使用js对象 */}<div style={{ color: 'red' }}>this is div</div></div>)}export default App
1.3 JSX中实现条件渲染

在React中,可以通过**逻辑与运算符&&、三元表达式(?:)**实现基础的条件渲染

const isLogin = true
function App () {return (<div className="App">{/* 逻辑与 && */}{isLogin && <span>this is span</span>}{/* 三元运算 */}{isLogin ? <span>jack</span> : <span>loading...</span>}</div>)
}
export default App

JSX中实现复杂条件渲染

// 定义文章类型
const articleType = 3  // 0 1 3
// 定义核心函数(根据文章类型返回不同的JSX模版)
function getArticleTem () {if (articleType === 0) {return <div>我是无图文章</div>} else if (articleType === 1) {return <div>我是单图模式</div>} else {return <div>我是三图模式</div>}
}
function App () {return (<div className="App">{/* 调用函数渲染不同的模版 */}{getArticleTem()}</div>)
}
export default App

二.React中的事件绑定

1.基础事件绑定
语法:on + 事件名称 = { 事件处理程序 },整体上遵循驼峰命名法
2.使用事件对象参数
语法:在事件回调函数中设置形参e
3.传递自定义参数
语法:事件绑定的位置改造成箭头函数的写法,在执行clickHandler实际处理业务函数的时候传递实参
4.同时传递事件对象和自定义参数
在事件绑定的位置传递事件实参e和自定义参数,clickHandler中声明形参,注意顺序对应

function App () {// 基础绑定// const handleClick = () => {//   console.log('button被点击了')// }// 事件参数e// const handleClick = (e) => {//   console.log('button被点击了', e)// }// 传递自定义参数// const handleClick = (name) => {//   console.log('button被点击了', name)// }// 既要传递自定义参数 而且还要事件对象econst handleClick = (name, e) => {console.log('button被点击了', name, e)}return (<div className="App"><button onClick={(e) => handleClick('jack', e)}>click me </button></div>)
}

三.classnames优化类名控制

classnames是一个简单的JS库,可以非常方便的通过条件动态控制class类名的显示
在这里插入图片描述

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

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

相关文章

vivado 手动布线

手动路由 手动路由允许您为网络选择特定的路由资源。这给了你对信号将要采用的路由路径的完全控制。手动路由不调用route_design。路线在路线数据库中直接更新。当您想精确控制网络的延迟时&#xff0c;可能需要使用手动路由。对于例如&#xff0c;假设有一个源同步接口&#…

如何查看JVM使用的是什么垃圾收集器

文章目录 一、背景分析二、查看垃圾收集器三、理解的偏差四、深挖 demo 代码五、总结 一、背景分析 无论讨论对象的内存分配&#xff0c;还是讨论内存的回收策略或是算法&#xff0c;都需要明确指出是基于哪种垃圾收集器进行的讨论。所以&#xff0c;很自然地就想到这个问题&a…

脱敏技术!!!

什么是数据脱敏&#xff1f;&#xff1f;&#xff1f; 数据脱敏&#xff08;Data Masking&#xff09;是一种数据安全技术&#xff0c;旨在通过预先设定的规则和算法&#xff0c;对原始数据中包含的敏感信息进行变形处理&#xff0c;使得这些信息在非生产环境&#xff08;例如…

考研数学|汤家凤1800基础部分要做完吗?

我教你一个方法&#xff0c;保证让你高质量的做完1800基础部分&#xff0c;而且还不用把所有题目都做了 我当然不是教你如何投机取巧&#xff0c;投机取巧是考不了高分的&#xff0c;我教你的都是我在实际考研过程中实际运用到的方法&#xff01; 其实这个方法也是我在二战的时…

C#手术麻醉系统源码 可对接HIS LIS PACS 医疗系统各类设备 医院手麻系统源码

C#手术麻醉系统源码 可对接HIS LIS PACS 医疗系统各类设备 手术麻醉信息管理系统主要还是为了手术室开发提供全面帮助的系统&#xff0c;其主要是由监护设备数据采集子系统和麻醉临床系统两个子部分组成。包括从手术申请到手术分配&#xff0c;再到术前访视、术中记录及术后…

面试题:Java虚拟机JVM的组成

1. 基础概念 JVM是什么 Java Virtual Machine Java程序的运行环境&#xff08;java二进制字节码的运行环境&#xff09; 好处&#xff1a; 一次编写&#xff0c;到处运行 自动内存管理&#xff0c;垃圾回收机制 JVM由哪些部分组成&#xff0c;运行流程是什么&#xff1f; …

C++从入门到精通——C++输入和输出

C输入和输出 前言一、C打印Hello World二、C输入&输出关于I/O流C输入&输出cout函数cin函数endl函数 三、C输入和输出的说明printf、scanf和cout、cin的区别cout函数和cin函数控制精度和宽度std命名空间的使用惯例 前言 C中的输入和输出主要通过标准库中的iostream类实…

Linux 入门及其基本指令(上)

目录 0 .引言 1. XShell 远程登录 Linux 1.1 云服务器 1.2. XShell 远程登陆 Linux 2. 详解 Linux 基本指令 2.1 ls 指令 2.2 pwd 指令 2.3 cd 指令 2.4 touch 指令 2.5 mkdir指令 2.6 rmdir指令 && rm 指令 0 .引言 如今&#xff0c;Linux 在服务器…

uniapp vue-cli项目配置devServer和outPutDir

上一次说了使用vue-cli创建uni-app项目&#xff0c;然后使用第三方工具开发打包&#xff0c;利用jekins发布等。 这一次我想解决以下问题&#xff1a; 1我想配置devServer供开发环境使用&#xff0c;这样也可以解决开发环境的跨域问题 2以前我的每个版本信息都配置在package…

黑群晖基于docker配置frp内网穿透

前言 我的黑群晖需要设置一下内网穿透来外地访问&#xff0c;虽然zerotier的p2p组网已经很不错了&#xff0c;但是这个毕竟有一定的局限性&#xff0c;比如我是ios的国区id就下载不了zerotier的app&#xff0c;组网不了 1.下载镜像 选择第一个镜像 2.映射文件 配置frpc.ini&a…

C 指向指针的指针

指向指针的指针是一种多级间接寻址的形式&#xff0c;或者说是一个指针链。通常&#xff0c;一个指针包含一个变量的地址。当我们定义一个指向指针的指针时&#xff0c;第一个指针包含了第二个指针的地址&#xff0c;第二个指针指向包含实际值的位置。 一个指向指针的指针变量…

常见6种开源协议比较

前言 常见的开源许可协议有6种是比较常见和广泛使用的&#xff0c;每种协议都有其特定的使用场景和约束条件。这6种分别是GPL, LGPL&#xff0c;MIT许可证&#xff0c; Apache许可证&#xff0c;BSD许可证和Mozilla Public License&#xff08;MPL&#xff09;. 6种开源许可协议…

Redis 开源协议变更背后:开源软件与云计算巨头的竞争博弈

01 背景 在云计算的风潮下&#xff0c;开源软件的生态环境正在经历一场剧变。2024 年 3 月 20 日&#xff0c;这种变化在 Redis 身上得到了集中体现。Redis 商业公司 CEO Rowan Trollope 宣布&#xff0c;Redis 将从 BSD 3-Clause 许可证过渡到双重许可证模式&#xff0c;包括…

【Redis】Redisson实现分布式锁

Redisson是一个在Redis的基础上实现的Java驻内存数据网格&#xff08;In-Memory Data Grid&#xff09;。它不仅提供了一系列的分布式的Java常用对象&#xff0c;还提供了许多分布式服务&#xff0c;其中就包含了各种分布式锁的实现。 官网地址 GitHub地址 Redisson入门 1.引…

Nexus3 Docker 私有仓库

Nexus3 Docker 私有仓库 安装并部署 Nexus3 $ docker search nexus3$ docker pull sonatype/nexus3$ mkdir /home/tester/data/docker/nexus3/sonatype-work $ sudo chown -R 200 /home/tester/data/docker/nexus3/sonatype-work$ docker run -d --namenexus3 \ --restartalw…

面试题目--3.19

1.foo()和foo()之间有什么区别&#xff1f; 代表所有的warning忽略 2.什么是csrf攻击&#xff1f;如何防范&#xff1f; csrf&#xff0c;跨站请求伪造&#xff0c;攻击方伪装用户身份发送请求从而窃取信息或者破坏系统。 基本原理&#xff1a;用户访问a网站登录并生成了coo…

亲历中国智驾大战,吴新宙加入NVIDIA半年后首秀

‍作者 |张祥威 编辑 |德新 吴新宙近日现身NVIDIA GTC&#xff0c;这是其从小鹏汽车离开加入NVIDIA之后的首次公开亮相。 吴目前担任NVIDIA汽车事业部副总裁&#xff0c;全面负责NVIDIA的车载计算产品线DRIVE平台的产品定义以及工程落地工作。吴新宙最广为人知的经历&#xf…

3.28C++

复数类的实现&#xff0c;写出三种构造函数&#xff0c;算术运算符、关系运算符、逻辑运算符重载尝试实现自增、自减运算符的重载 #include <iostream> using namespace std; class Num {int rel; //实部int vir; //虚部 public:Num():rel(2),vir(1){}Num(int rel,…

深入解析RSA算法原理及其安全性机制

码到三十五 &#xff1a; 个人主页 心中有诗画&#xff0c;指尖舞代码&#xff0c;目光览世界&#xff0c;步履越千山&#xff0c;人间尽值得 ! 目录 一、RSA算法简介二、RSA算法原理2.1 背景与数学基础2.2 密钥生成2.3 加密过程2.4 解密过程 三、安全性考虑四、RSA的使用五、…

数据结构进阶篇 之 【二叉树链序存储】的整体实现讲解

封建迷信我嗤之以鼻&#xff0c;财神殿前我长跪不起 一、二叉树链式结构的实现 1.二叉树的创建 1.1 手动创建 1.2 前序递归创建 2.二叉树的遍历 2.1 前序&#xff0c;中序以及后序遍历概念 2.2 层序遍历概念 2.3 前序打印实现 2.4 中序打印实现 2.4 后序打印实现 2.…