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判断语句来实现复杂条件的渲染

相关推荐
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9152 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼3 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
小牛itbull4 小时前
ReactPress:重塑内容管理的未来
react.js·github·reactpress