React第三章(tsx语法入门 )

2024-09-06 22:52

本文主要是介绍React第三章(tsx语法入门 ),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

tsx语法入门

FAQ

tsx跟jsx有什么区别

答: 基本没有没有区别只是在jsx语法上增加了类型。

jsx是什么?

答:jsx是js的语法扩展,允许在js中编写html代码。

例如:const fn = () => <div>小满是谁?没听说过</div>

语法编写

  • 使用tsx绑定变量{value}

绑定class需要用className

function App() {const num: number = 333const fn = () => 'test'return (<>{'11' /** 字符串用法 */}{num /** 变量用法 */}{fn() /** 函数用法 */}{new Date().getTime() /** 日期用法 */}</>)
}
//绑定class(className) id 属性等等 都是一样的
function App() {const value:string = 'A'return (<><div data-index={value} className={value} id={value}>{value}</div></>)
}
//绑定多个class(className)
function App() {const a:string = 'A'return (<><div className={`${a} class2`}>{value}</div></>)
}
//绑定样式style
function App() {const styles = { color: 'red' }return (<><div style={styles}>test</div></>)
}
  • 使用tsx绑定事件on[Click]{fn}小驼峰 其他事件也是一样的
function App() {const value: string = '小满'const clickTap = (params: string) => console.log(params)return (<><div onClick={() => clickTap(value)}>{value}</div></>)
}
  • tsx如何使用泛型

正常写泛型语法会跟tsx语法冲突,他会把泛型理解成是一个元素,解决方案后面加一个,即可

function App() {const value: string = '小满'const clickTap = <T,>(params: T) => console.log(params)return (<><div onClick={() => clickTap(value)}>{value}</div></>)
}
  • tsx如何渲染html代码片段(dangerouslySetInnerHTML)

dangerouslySetInnerHTML 的值是一个对象,该对象包含一个名为 __html 的属性,且值为你想要插入的 HTML 字符串

function App() {const value: string = '<section style="color:red">小满</section>'return (<><div dangerouslySetInnerHTML={{ __html: value }}></div></>)
}
  • tsx如何遍历dom元素

使用map遍历返回html标签即可

function App() {const arr: string[] = ["小满","中满","大满"]return (<>{arr.map((item) => {return <div>{item}</div>})}</>)
}
  • tsx如何编写条件语句

使用三元表达式就可以了

function App() {const flag:boolean = truereturn (<>{flag ? <div>真的</div> : <div>假的</div>}</>)
}
  • tsx注意事项

{}插值语句内不允许编写switch if 变量声明 或者直接放入对象本体

下面展示错误用法正确用法对比

//错误用法
function App() {const obj = { name: '小满' }return (<>{obj}</>)
}
//正确用法
function App() {const obj = { name: '小满' }return (<>{obj.name}{JSON.stringify(obj)}</>)
}
//错误用法
function App() {const flag:boolean = truereturn (<>{if(flag){<p>1</p>}else{<p>2</p>}}</>)
}
//正确用法
function App() {const flag:boolean = truereturn (<>{flag ? <div>1</div> : <div>2</div>}</>)
}

这篇关于React第三章(tsx语法入门 )的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1143352

相关文章

Java使用ANTLR4对Lua脚本语法校验详解

《Java使用ANTLR4对Lua脚本语法校验详解》ANTLR是一个强大的解析器生成器,用于读取、处理、执行或翻译结构化文本或二进制文件,下面就跟随小编一起看看Java如何使用ANTLR4对Lua脚本... 目录什么是ANTLR?第一个例子ANTLR4 的工作流程Lua脚本语法校验准备一个Lua Gramm

Java字符串操作技巧之语法、示例与应用场景分析

《Java字符串操作技巧之语法、示例与应用场景分析》在Java算法题和日常开发中,字符串处理是必备的核心技能,本文全面梳理Java中字符串的常用操作语法,结合代码示例、应用场景和避坑指南,可快速掌握字... 目录引言1. 基础操作1.1 创建字符串1.2 获取长度1.3 访问字符2. 字符串处理2.1 子字

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript

Python基础语法中defaultdict的使用小结

《Python基础语法中defaultdict的使用小结》Python的defaultdict是collections模块中提供的一种特殊的字典类型,它与普通的字典(dict)有着相似的功能,本文主要... 目录示例1示例2python的defaultdict是collections模块中提供的一种特殊的字

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》:本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性,它们用于控制元素周围的空白区域,本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd