react Jsx基础概念和本质

什么是jsx

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

javascript 复制代码
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对象

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判断语句

相关推荐
脑袋大大的14 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0123 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
quweiie1 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20151 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin2 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦2 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆2 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆3 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆3 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding3 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui