React JSX语法

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

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

具体

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

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

javascript 复制代码
   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时直接绑定一个箭头函数

相关推荐
Magicman20 小时前
JavaScript-事件学习
javascript
知识分享小能手20 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(下)——知识点详解 + 案例实战(5)
前端·javascript·学习·微信小程序·小程序·vue·前端开发
aidingni8881 天前
掌握 TCJS 游戏摄像系统:打造动态影院级体验
前端·javascript
我是日安1 天前
从零到一打造 Vue3 响应式系统 Day 23 - Watch:基础实现
前端·javascript·vue.js
FogLetter1 天前
Map 与 WeakMap:内存管理的艺术与哲学
前端·javascript
前端伪大叔1 天前
第15篇:Freqtrade策略不跑、跑错、跑飞?那可能是这几个参数没配好
前端·javascript·后端
二狗mao1 天前
React学习(一)描述UI
react.js
課代表1 天前
Acrobat DC 文本域表单验证中的 js 使用
javascript·正则表达式·表单验证·数据完整性·字段验证·事件对象·自定义验证
用户6387994773051 天前
Next.js 多语言对决:next-intl vs next-i18next vs Intlayer
javascript
Keepreal4961 天前
谈谈对javascript原型链的理解以及原型链的作用
前端·javascript