react Jsx基础概念和本质

什么是jsx

jsx是JavaScript和XML(HTML)的缩写,表示在js代码中编写HTML模板结构,它是react中编写UI模板的方式

const message = 'this is message'
function App(){return (<div><h1>this is title</h1>{message}</div>)
}

jsx优势

  1. HTML的声明式模板写法

  2. js的可编程能力

jsx的本质

jsx并不是标准的js语法,它是js的语法扩展,浏览器本身不能识别,需要通过解析工具做解析之后才能在浏览器运行

jsx中使用js表达式

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

  1. 使用引号传递字符串

  2. 使用javascript变量

  3. 函数调用和方法调用

  4. 使用javascript对象

const name = '张三'
function age(){return 18
}
function App() {return (<div className="App">111{/* 1. 使用引号传递字符串 */}{'传递字符串'}{/* 2. 使用javascript变量 */}{name}{/* 3. 函数调用和方法调用 */}{/* 函数调用 */}{age()}{/* 方法调用 */}{new Date().toLocaleString()}{/* 4. 使用javascript对象 一般用于设置style */}<div style={{color:'red'}}>使用javascript对象</div></div>);
}export default App;

jsx实现列表渲染

需要使用原生js的map方法实现

jsx实现条件渲染

jsx实现复杂条件渲染

解决方案:自定义函数+if判断语句

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

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

相关文章

Mike she中常出现的error及解决办法

前言&#xff1a; 最近用了下MIKE SHE坡面流模块&#xff0c;感觉一场雨降下来和MIKESHE和MIKE21模块算出来还是有不一样的地方&#xff0c;这个先不聊&#xff0c;聊点直接的&#xff0c;到底一个玩个模块遇到了哪些错误&#xff0c;我们来说说解决方法。 Error1&#xff1a;…

嵌入式人工智能(16-基于树莓派4B的电机控制-步进电机28BYJ-48)

1、步进电机 步进电机是一种旋转电机&#xff0c;通过在特定的步进角度内进行转动来实现精确的定位控制。步进电机通常由电磁线圈和磁轴组成&#xff0c;线圈通过电流激励产生磁场&#xff0c;而磁轴则受到线圈所产生的磁场的作用而转动。 步进电机的运动是离散的&#xff0c;…

el-select选择器修改背景颜色

<!--* FilePath: topSearch.vue* Author: 是十九呐* Date: 2024-07-18 09:46:03* LastEditTime: 2024-07-18 10:42:03 --> <template><div class"topSearch-container"><div class"search-item"><div class"item-name&quo…

野兔在线工具箱系统全新升级改版,基于TP8和yetuadmin后台实现

野兔在线工具箱系统全新升级改版&#xff0c;基于TP8和yetuadmin后台实现 系统名称&#xff1a;野兔在线工具系统 系统语言&#xff1a;支持多语言&#xff0c;大概有20种 系统源码&#xff1a;不加密&#xff0c;开源 系统开发&#xff1a;PHPMySQL (基于thinkphp8&#x…

linux内核中list的基本用法

内核链表 1 list_head 结构 为了使用链表机制&#xff0c;驱动程序需要包含<linux/types.h>头文件&#xff0c;该文件定义了如下结构体实现双向链&#xff1a; struct list_head {struct list_head *next, *prev; };2 链表的初始化 2.1 链表宏定义和初始化 可使用以…

无刷电机数学模型建立之——克拉克变换

前言 MOS管如何驱动无刷电机&#xff0c;请参考如下链接 无刷电机概念与原理 一、FOC流程图 二、FOC的过程是输入需求的电机力矩&#xff0c;最后把需求的电机力矩转换为三相线的电力输出&#xff0c;并且让电机旋转物理上输出需求的力矩的过程&#xff0c;这也称为电机控制三…

钡铼分布式I/O系统边缘计算Modbus,MQTT,OPC UA耦合器BL206

BL206系列耦合器是一个数据采集和控制系统&#xff0c;基于强大的32 位微处理器设计&#xff0c;采用Linux操作系统&#xff0c;支持Modbus&#xff0c;MQTT&#xff0c;OPC UA协议&#xff0c;可以快速接入现场PLC、DCS、PAS、MES、Ignition和SCADA以及ERP系统&#xff0c;同时…

通过vue3 + TypeScript + uniapp + uni-ui 实现下拉刷新和加载更多的功能

效果图: 核心代码: <script lang="ts" setup>import { ref, reactive } from vue;import api from @/request/api.jsimport empty from @/component/empty.vueimport { onLoad,onShow, onPullDownRefresh, onReachBottom } from @dcloudio/uni-applet form …

【Android】Activity的生命周期

Activity的生命周期 1.返回栈 其实Android是使用任务&#xff08;task&#xff09;来管理Activity的&#xff0c;一个任务就是一组存放在栈里的Activity的集合&#xff0c;这个栈也被称作返回栈&#xff08;back stack&#xff09;。栈是一种后进先出的数据结构&#xff0c;在…

AES算法概述

文章目录 一、AES 概述二、AES 加密算法的特点三、秘钥类型四、填充方式五、加密方式 一、AES 概述 二、AES 加密算法的特点 AES加密的数据块长度为128&#xff08;16字节&#xff09;&#xff0c;长度不足需要填充。密码长度可以为16,24,32字节。 三、秘钥类型 AES加密按秘…

【C++高阶】精通AVL树:全面剖析与深度学习

目录 &#x1f680; 前言一&#xff1a; &#x1f525; AVL树的性质二&#xff1a; &#x1f525; AVL树节点的定义三&#xff1a; &#x1f525; AVL树的插入四&#xff1a; &#x1f525; AVL树的平衡调整&#xff08;附动图&#xff09; 五&#xff1a;&#x1f525; AVL树的…

c++初阶篇(三):内联函数及auto关键字

1.内联函数 1.1 概念 以inline修饰的函数叫做内联函数&#xff0c;编译时C编译器会在调用内联函数的地方展开&#xff0c;没有函数调 用建立栈帧的开销&#xff0c;内联函数提升程序运行的效率。 如果在上述函数前增加 inline 关键字将其改成内联函数&#xff0c;在编译期间编…

RNN循环递归网络讲解与不掉包python实现

这里写目录标题 1.算法简介2. RNN算法原理2.1 RNN基本结构介绍2.2 计算流程 3.完整训练代码 1.算法简介 参考论文&#xff1a;Elman J L. Finding structure in time[J]. Cognitive science, 1990, 14(2): 179-211.&#xff0c;谷歌被引次数超16000! 说到循环递归结构就不得不…

秒杀案例-分布式锁Redisson、synchronized、RedLock

模拟秒杀 源码地址前期准备创建数据库表导入数据dependenciespomControllerTSeckillProductTseckillProductServiceTseckillProductServiceImplTseckillProductMapperTseckillProductMapper.xml使用JMeter压力测试开始测试超卖现象原因解决办法更改数据库库存500进行JMeter压力…

运维锅总详解Kubernetes之Kubelet

本文尝试从Kubelet的发展历史、实现原理、交互逻辑、伪代码实现及最佳实践5个方面对Kubelet进行详细阐述。希望对您有所帮助&#xff01; 一、kubelet发展历史 Kubelet 是 Kubernetes 中的核心组件之一&#xff0c;负责管理单个节点上的容器运行。它的发展历史和功能演进是 Kub…

【LeetCode】222. 完全二叉树的个数

什么是计算机基础&#xff1f;如果本题能够用二分二进制二叉树的方式解出本题&#xff0c;那么我可以认为你的计算机基础就很好了。很久以来&#xff0c;我一直认为自己的计算机基础好&#xff0c;但是自刷题以来&#xff0c;跟网上这么多优秀的同学相比&#xff0c;我发现我实…

五分钟学会 Docker Registry 搭建私有镜像仓库

在上一篇文章《前端不懂 Docker &#xff1f;先用它换掉常规的 Vue 项目部署方式》中&#xff0c;我们学习了如何使用 aliyun 私有镜像仓库&#xff0c;也了解到可以使用 Docker Registry 搭建私有镜像仓库。这篇文章就分享下实操过程。 registry 是官方提供的 registry 镜像&…

WEB前端09-前端服务器搭建(Node.js/nvm/npm)

前端服务器的搭建 在本文中&#xff0c;我们将介绍如何安装和配置 nvm&#xff08;Node Version Manager&#xff09;以方便切换不同版本的 Node.js&#xff0c;以及如何设置 npm&#xff08;Node Package Manager&#xff09;使用国内镜像&#xff0c;并搭建一个简单的前端服…

类和对象(三)

默认成员函数 接下来继续看剩下的两个默认成员函数。 const成员函数 将const修饰的成员函数称之为const成员函数&#xff0c;const修饰成员函数放到成员函数参数列表的后 ⾯。const实际修饰该成员函数隐含的this指针&#xff0c;表明在该成员函数中不能对类的任何成员进⾏修…

秋招突击——7/17——复习{二分查找——搜索插入位置、搜索二维矩阵,}——新作{链表——反转链表和回文链表,子串——和为K的子数组}

文章目录 引言新作二分模板二分查找——搜索插入位置复习实现 搜索二维矩阵复习实现 新作反转链表个人实现参考实现 回文链表个人实现参考实现 和为K的子数组个人实现参考实现 总结 引言 今天算法得是速通的&#xff0c;严格把控好时间&#xff0c;后面要准备去面试提前批了&a…