(二)JSX基础

什么是JSX

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

在这里插入图片描述
优势:1.HTML的声明式模版方法;2.JS的可编程能力

JSX的本质

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

高频场景

1. JSX中使用JS表达式

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

  1. 使用引号传递字符串
  2. 使用JavaScript变量
  3. 函数调用和方法调用
  4. 使用JavaScript对象

注意:if语句、switch语句、变量声明属于语句,不是表达式,不能出现在{}中

App.js

//项目根组件
//App -> index.js -> public/index.html(root)
function App() {const list = [{ id: 1001, name: 'Vue'},{ id: 1002, name: 'React'},{ id: 1003, name: 'Angular'}]return (<div className="App">this is App{/* 渲染列表 */}{/* map循环哪个结构 return结构 */}{/* 注意事项:加上一个独一无二的key 字符串或者number */}{/* key的作用:React框架内部使用 提升更新性能的 */}<ul>{list.map(item => <li key={item.id}>{item.name}</li>)}</ul></div>);
}export default App;

在这里插入图片描述

2. JSX中实现列表渲染

语法:在JSX中可以使用原声JS中的map方法遍历渲染列表

App.js

//项目根组件
//App -> index.js -> public/index.html(root)
function App() {const list = [{ id: 1001, name: 'Vue'},{ id: 1002, name: 'React'},{ id: 1003, name: 'Angular'}]return (<div className="App">this is App<ul>{list.map(item => <li key={item.id}>{item.name}</li>)}</ul></div>);
}export default App;

3. JSX中实现条件渲染

在这里插入图片描述

App.js

function App() {const isLogin = trueconst loading = falsereturn (<div className="App">this is App{/* 条件渲染 */}{isLogin && <div>Jack</div>}{loading ? <span>loading</span> : <span>this is span</span>}</div>);
}export default App;

4. JSX中实现复杂条件渲染

在这里插入图片描述
App.js

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

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

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

相关文章

webapi跨越问题

由于浏览器存在同源策略&#xff0c;为了防止 钓鱼问题&#xff0c;浏览器直接请求才不会有跨越的问题 浏览器要求JavaScript或Cookie只能访问同域下的内容 浏览器也是一个应用程序&#xff0c;有很多限制&#xff0c;不能访问和使用电脑信息&#xff08;获取cpu、硬盘等&#…

LeetCode 26删除有序数组中的重复项

去重题&#xff0c;双指针&#xff0c;&#xff0c;因为题干说原地删除&#xff0c;且nums其余元素不重要。一个cur记录当前不重复的数应该插在第几位了&#xff0c;for循环里的i相当于是第二个指针&#xff08;右指针&#xff09;&#xff0c;遍历数组来找不重复的元素 class …

C#发送邮件的SMTP配置方法?如何群发邮件?

C#发送邮件安全性如何保障&#xff1f;C#怎么配置实现发送邮件&#xff1f; 在C#开发中&#xff0c;发送电子邮件是一个常见的需求。无论是用于注册确认、密码重置还是其他通知功能&#xff0c;SMTP&#xff08;简单邮件传输协议&#xff09;都是实现这一功能的关键。下面&…

Shell脚本学习_内置命令

目录 1.内置命令介绍&#xff1a; 2.Shell内置命令&#xff1a;alias设置别名 3.Shell内置命令&#xff1a;echo输出字符串 4.Shell内置命令&#xff1a;read读取控制台输入 5.Shell内置命令&#xff1a;exit退出 6.Shell内置命令&#xff1a;declare设置变量 1.内置命令…

kali2022安装教程(附安装包)

第一步&#xff1a;下载镜像文件 百度网盘下载https://pan.baidu.com/s/1efRQGFTbq6Kgw9axLOmWzg?pwdemxf 第二步&#xff1a;打开Vmware 第三步&#xff1a;进行各项配置 创建新的虚拟机&#xff0c;选择高级&#xff0c;然后下一步 直接默认下一步 选择稍后安装然后下…

设计软件有哪些?效果工具篇(3),渲染100邀请码1a12

这次我们再介绍一批渲染效果和后期处理的工具。 1、ColorCorrect ColorCorrect是一种图像处理技术&#xff0c;用于调整图像的色彩和对比度&#xff0c;使其更加自然和平衡。通过ColorCorrect&#xff0c;用户可以调整图像的色调、亮度、饱和度等参数&#xff0c;以达到理想的效…

kube-promethesu调整coredns监控

K8s集群版本是二进制部署的1.20.4&#xff0c;kube-prometheus对应选择的版本是kube-prometheus-0.8.0 Coredns是在安装集群的时候部署的&#xff0c;采用的也是该版本的官方文档&#xff0c;kube-prometheus中也有coredns的监控配置信息&#xff0c;但是在prometheus的监控页…

kivy 百词斩项目 报错

AttributeError: FigureCanvasKivyAgg object has no attribute resize_event AttributeError: FigureCanvasKivyAgg object has no attribute resize_event 是一种常见的Python错误&#xff0c;当你试图访问一个对象&#xff08;在这个例子中是 FigureCanvasKivyAgg 对象&am…

二次规划问题(Quadratic Programming, QP)原理例子

二次规划(Quadratic Programming, QP) 二次规划(Quadratic Programming, QP)是优化问题中的一个重要类别,它涉及目标函数为二次函数并且线性约束条件的优化问题。二次规划在控制系统、金融优化、机器学习等领域有广泛应用。下面详细介绍二次规划问题的原理和求解过程 二…

物联网实战--平台篇之(十四)物模型(用户端)

目录 一、底层数据解析 二、物模型后端 三、物模型前端 四、数据下行 本项目的交流QQ群:701889554 物联网实战--入门篇https://blog.csdn.net/ypp240124016/category_12609773.html 物联网实战--驱动篇https://blog.csdn.net/ypp240124016/category_12631333.html 物联网…

MATLAB数学建模——数据拟合

文章目录 一、简介二、多项式拟合&#xff08;一&#xff09;指令介绍&#xff08;二&#xff09;代码 三、指定函数拟合&#xff08;一&#xff09;指令介绍&#xff08;二&#xff09;代码 一、简介 曲线拟合也叫曲线逼近&#xff0c;主要要求拟合的曲线能合理反映数据的基本…

如何有效释放Docker占用的存储空间

随着Docker的广泛应用&#xff0c;我们经常会遇到Docker占用过多存储空间的问题。这可能是由于频繁的镜像拉取、容器创建和删除等操作导致的。本文将介绍几种方法来有效释放Docker占用的存储空间&#xff0c;特别是docker system prune命令的使用。 Docker的存储机制 Docker使…

Linux 36.3 + JetPack v6.0@jetson-inference之目标检测

Linux 36.3 JetPack v6.0jetson-inference之目标检测 1. 源由2. detectnet2.1 命令选项2.2 下载模型2.3 操作示例2.3.1 单张照片2.3.2 多张照片2.3.3 视频 3. 代码3.1 Python3.2 C 4. 参考资料 1. 源由 从应用角度来说&#xff0c;目标检测是计算机视觉里面第二个重要环节。之…

开源项目学习——vnote

一、介绍 vnote是一款免费且开源的markdown编辑器&#xff0c;用C开发&#xff0c;基于Qt框架&#xff0c;windows/linux/mac都能用。 二、编译 $ git clone --recursive https://github.com/vnotex/vnote.git $ cd vnote && mkdir build $ cd build $ cmake ../ $ …

鲜为人知的英伟达创始人:早早退出,身价不如黄仁勋零头

内容提要 普里姆因为婚姻纠纷等个人生活的干扰无法专注在工作上&#xff0c;在成立公司的10年后&#xff0c;也就是2003年宣布退休离开英伟达&#xff0c;并在2006年出售剩余的所有英伟达股份&#xff0c;过上不与外界联系、离群索居的生活&#xff0c;在家中鼓捣着如何“拯救…

UML交互图-协作图

概述 协作图和序列图都表示出了对象间的交互作用&#xff0c;但是它们侧重点不同。序列图清楚地表示了交互作用中的时间顺序&#xff0c;但没有明确表示对象间的关系。协作图则清楚地表示了对象间的关系&#xff0c;但时间顺序必须从顺序号获得。序列图常常用于表示方案&#…

【云原生】基于windows环境搭建Docker

目录 一、Docker Desktop搭建 二、前置准备 2.1开启 Hyper-V 2.2 Hyper-V选项看不到问题解决 2.3 开启或升级wsl 三、安装过程 3.1 下载安装包 3.2 安装 Docker Desktop 3.2.1 Docker 图标一直处于starting状态问题解决 3.3 配置仓库与镜像 3.4 docker功能测试 四、…

HSC Mailinspector loader.php 任意文件读取漏洞复现(CVE-2024-34470)

0x01 产品简介 HSC Mailinspector是一款远程电子邮件检查工具&#xff0c;支持POP3/IMAP4协议。它允许用户远程扫描最新邮件&#xff0c;并进行浏览、垃圾邮件排除、编辑、删除等操作&#xff0c;无需实际登录邮箱。 0x02 漏洞概述 由于HSC Mailinspector /public/loader.ph…

揭秘:币圈黑科技私钥碰撞器的项目教程玩法,外面竟然收费200+

一、前言&#xff1a;探寻币圈私钥探测器神秘面纱 在风华正茂的币圈&#xff0c;不仅有无数高涨或者暴跌的数字货币&#xff0c;更有许多被誉为“黑科技”的工具备受热议。其中&#xff0c;私钥碰撞器就是这些黑科技中的一员&#xff0c;它能够搜索并碰撞出特定地址的私钥&…

【AI 高效问答系统】机器阅读理解实战内容

⭐️我叫忆_恒心&#xff0c;一名喜欢书写博客的研究生&#x1f468;‍&#x1f393;。 如果觉得本文能帮到您&#xff0c;麻烦点个赞&#x1f44d;呗&#xff01; 近期会不断在专栏里进行更新讲解博客~~~ 有什么问题的小伙伴 欢迎留言提问欧&#xff0c;喜欢的小伙伴给个三连支…