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

相关文章:

  • OCCT基础类库介绍:Modeling Algorithm - Features
  • 软件工程期末试卷简答题版带答案(共21道)
  • 【DCS开源项目】—— Lua 如何调用 DLL、DLL 与 DCS World 的交互
  • Vue3 + TypeScript + xlsx 导入excel文件追踪数据流转详细记录(从原文件到目标数据)
  • 领域驱动设计(DDD)【3】之事件风暴
  • EasyExcel导出极致封装 含枚举转换 分页导出
  • GitHub Copilot快捷键
  • 缓存与加速技术实践-Kafka消息队列
  • 腾讯云IM即时通讯:开启实时通信新时代
  • Python中字符串常用的操作方法
  • Linux TCP/IP协议栈中的TCP输入处理:net/ipv4/tcp_input.c解析
  • 学习C++、QT---03(C++的输入输出、C++的基本数据类型介绍)
  • AI与SEO关键词协同进化
  • IEC61850 通信协议测试验证方法详解
  • 解锁K-近邻算法:数据挖掘的秘密武器
  • 华为云Flexus+DeepSeek征文 | 基于Flexus X实例的金融AI Agent开发:智能风控与交易决策系统
  • 【AI论文】扩散二元性
  • 面试题-定义一个函数入参数是any类型,返回值是string类型,如何写出这个函数,代码示例
  • ncu学习笔记01——合并访存
  • 系统化的Node.js服务器搭建攻略
  • 将Python的JSON字符串转换为JSON
  • UE5 游戏模板 —— FirstShootGame
  • Docker简单介绍与使用以及下载对应镜像(项目前置)
  • 【软考高级系统架构论文】论湖仓一体架构及其应用
  • RNN工作原理和架构
  • Python的6万张图像数据集CIFAR-10和CIFAR-100说明
  • Redis哨兵模式的学习(三)
  • STM32F103_LL库+寄存器学习笔记12.3 - 串口DMA高效收发实战3:支持多实例化的版本
  • 【24】二维码数据集(有v5/v8模型)/YOLO二维码检测
  • 项目拓展-Spring实现策略类统一管理