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

相关文章:

  • Hologres 使用 FDW
  • 「Linux文件及目录管理」输入输出重定向与管道
  • 网络编程及原理(六):三次握手、四次挥手
  • 什么是跨域问题?后端如何解决跨域问题?
  • 基于FPGA的白噪声信号发生器verilog实现,包含testbench和开发板硬件测试
  • ffmpeg(六):图片与视频互转命令
  • Python编程语言:2025年AI浪潮下的技术统治与学习红利
  • python的校园兼职系统
  • 分享两个可以一键生成sql server数据库 html格式巡检报告的脚本
  • 张之瞳全新单曲《6:30am》上线:以音乐定格青春遗憾中的诗意守望
  • Python 邻接表详细实现指南
  • 【软考高级系统架构论文】论面向服务架构设计及其应用
  • 【设计模式】6.原型模式
  • Git 使用手册:从入门到精通
  • 海光x86与Intel/AMD x86的差异解析:技术演进、架构博弈与未来之路
  • 通过 Lambda + API Gateway + 外部 API 实现。
  • 国产通用智能语音芯片品牌有哪些?
  • 树莓派无源蜂鸣器播放两首音乐实验指导书
  • python模块常用语法sys、traceback、QApplication
  • (LeetCode 面试经典 150 题) 169. 多数元素(哈希表 || 二分查找)
  • Java集合框架初识
  • 一,python语法教程.内置API
  • 【设计模式】3.装饰模式
  • 跳跳杆Pogo Stick
  • Swift 解锁数组可修改场景:LeetCode 307 高效解法全解析
  • (LeetCode 每日一题) 3085. 成为 K 特殊字符串需要删除的最少字符数 (贪心、哈希表)
  • 从0开始学习计算机视觉--Day02--数据驱动
  • MySQL之InnoDB存储引擎深度解析
  • Rust自动化测试的框架
  • Linux 系统结构划分详解:用户区与内核区的设计逻辑