当前位置: 首页 > 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.lryc.cn/news/573217.html

相关文章:

  • 分布式锁的四种实现方式:从原理到实践
  • 【Linux仓库】进程概念与基本操作【进程·贰】
  • 使用 Telegraf 向 TDengine 写入数据
  • HarmonyOS 5的分布式通信矩阵是如何工作的?
  • Flink流水线+Gravitino+Paimon集成
  • 5.2 Qt Creator 使用FFmpeg库
  • ffmpeg(六):图片与视频互转命令
  • 项目练习:Jaspersoft Studio制作PDF报表时,detail和column footer之间存在很大的空白区
  • VR油库虚拟仿真系统:开启智慧油库新时代
  • 广州华锐互动:以技术创新引领虚拟现实体验新高度
  • 蚂蚁百宝箱快速创建智能体AI小程序
  • 【Node】最佳Node.js后端开发模板推荐
  • win环境使用openssl创建p12证书
  • 18年磨一剑!开利科技启动数字化增量投资新时代
  • 软件工程概述:核心概念、模型与方法全解析
  • (详细介绍)线性代数中的零空间(Null Space)
  • Java、PHP、C++ 三种语言实现爬虫的核心技术对比与示例
  • Mac电脑-触摸板增强工具-BetterTouchTool
  • Sublime text启用vim
  • Science Advances:皮肤附着触觉贴片,实现多功能和增强的触觉交互
  • 【Docker基础】Docker镜像管理:docker pull详解
  • Cursor汉化
  • Tesla T4 安装 Audio2face
  • 大模型在急性弥漫性腹膜炎预测及治疗方案制定中的应用研究
  • 一站式了解责任链模式
  • Taro 跨端应用性能优化全攻略:从原理到实践
  • 抖音的视频怎么下载下来——下载狗解析工具
  • 【StarRocks系列】StarRocks vs Mysql
  • 【StarRocks系列】join查询优化
  • 【软考高级系统架构论文】论软件设计方法及其应用