React-JSX基础

什么是JSX

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

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

JSX的本质

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

编译网站:Babel · Babel

点击右上角的"Try it out"

要把最左侧的react勾选上,左侧填写JSX代码,右侧就是浏览器编译后的代码

高频场景

JSX中使用JS表达式

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

1.使用引号传递字符串

复制代码
{字符串}

2.使用JavaScript变量

复制代码
{JS变量名}

3.函数调用和方法调用

复制代码
{函数名()}

4.使用JavaScript对象

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

JSX中实现列表渲染

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

注意事项:加上一个独一无二的key值(类型可以是字符串或者number)

key的作用:React框架内部使用,提升更新性能

JSX中实现条件渲染

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

JSX中实现复杂条件渲染

自定义函数+if判断语句来实现复杂条件的渲染

相关推荐
Yvonne爱编码8 分钟前
AJAX入门-AJAX 概念和 axios 使用
前端·javascript·ajax·html·js
在路上`24 分钟前
前端学习之后端java小白(三)-sql外键约束一对多
java·前端·学习
Pu_Nine_91 小时前
10 分钟上手 ECharts:从“能跑”到“生产级”的完整踩坑之旅
前端·javascript·echarts·css3·html5
東雪蓮☆2 小时前
从零开始掌握 Web 与 Nginx:入门详解
运维·服务器·前端·nginx
脑子慢且灵2 小时前
【JavaWeb】一个简单的Web浏览服务程序
java·前端·后端·servlet·tomcat·web·javaee
柯南二号2 小时前
【大前端】 断点续传 + 分片上传(大文件上传优化) 的前端示例
前端
前端小超超2 小时前
如何配置capacitor 打包的安卓app固定竖屏展示?
android·前端·gitee
xiaopengbc2 小时前
在Webpack中,如何在不同环境中使用不同的API地址?
前端·webpack·node.js
前端AK君3 小时前
React中台系统如何嵌入到业务系统中
前端
Slice_cy3 小时前
不定高虚拟列表
前端