当前位置: 首页 > news >正文

React JSX语法

赋值 其实是XML和JS绑定在一起 本质是JS 的一种语法扩展

规范: 1.根组件只允许包裹一个根元素 2.render函数 return 语句 需要有()包裹 3可以使用单标签也可以使用双标签

具体

1数字类型 数组类型 和字符串类型数据会在jsx中正常显示 ,有一些数据类型会被忽略 undefined null boolean 类型

可以使用布尔类型和某种类型进行逻辑与 条件渲染 所以比如说

   return <div>{/* 什么*/ }<h2>当前计数:{this.state.counter}</h2><button onClick={this.increase.bind(this)}>增加+</button><button onClick={this.decrease.bind(this)}>减小-</button><div>{this.state.counter&&<div>这时候counter不为零</div>}</div></div>

如果这里的counter作为渲染的条件,则不希望被显示 null undefined

如果想要把三种数据类型进行显示的话 1.toString() 方法 2.String()强制类型转化 3.使用+ 强制类型转化

最后,对象类型无法作为jsx的子类被展示

在这里插入图片描述

JSX去嵌入表达式

1.运算表达式

2.三元运算符

3.执行一个函数

JSX绑定 class 绑定普通属性 绑定style属性

在这里插入图片描述

事件绑定 类组件

方案一: 在定义绑定时间时候通过bind函数显式绑定this

在这里插入图片描述

方案二:在构造函数中使用bind显式绑定this

在这里插入图片描述

方案三:在定义类方法时候将方法按照箭头函数的形式写出来

在这里插入图片描述

方案四:在绑定button时直接绑定一个箭头函数

在这里插入图片描述

http://www.dtcms.com/a/256242.html

相关文章:

  • 基于YOLO的智能车辆检测与记录系统
  • Vue.js 粒子连线动画组件 - FlyingLines
  • 【RAG优化】深度解析开源项目MinerU:从PDF解析到多模态理解的工业级解决方案
  • 《Whisper:开启语音识别新时代的钥匙》
  • 什么是跨域问题?后端如何解决跨域问题?
  • JVM(面试)
  • 【C/C++】Gtest + GMock 简单使用示例
  • 简说MQTT
  • 【分布式理论】读确认数与写确认数:分布式一致性的核心概念
  • C# 将 Enum枚举转成List,并显示在下拉列表中
  • 如何开发HarmonyOS 5的分布式通信功能?
  • 动态ds-vnp之normal和shortcut两种方式配置案例
  • 【软考高级系统架构论文】论企业应用系统的分层架构风格
  • AWS RDS/Aurora 开启 Database Insights 高级模式全攻略
  • SQL Server基础语句2:表连接与集合操作、子查询与CET、高级查询
  • 【Qt开发】网络运用
  • GitHub OAuth 认证示例
  • Linux - 安装 git(sudo apt-get)
  • Vue 简写形式全解析:清晰记忆指南
  • 《map和set的使用介绍》
  • 八大架构宪法 - 技术使用指导说明文档
  • OBS --- 录像地址
  • Mac Parallels Desktop Kali 2025 代理设置
  • 区块链是什么
  • 学习C++、QT---02(创建第一个C++项目、命名空间的讲解)
  • Transformer:现代自然语言处理的革命性架构
  • Java大厂面试攻略:Spring Boot与微服务架构深度剖析
  • yolov11转ncnn
  • 人人都是音乐家?腾讯开源音乐生成大模型SongGeneration
  • [论文阅读] 人工智能 + 软件工程 |