react.js typescript 前端 React18入门（第一篇）——JSX、TSX语法详解

文章目录

一、JSX 语法简介二、和 HTML 标签的几点不同三、JSX 属性四、JSX 事件4.1 简单点击事件4.2 类型限制4.3 带参数，箭头函数

五、插入 JS 变量六、JSX 中使用条件判断七、循环

一、JSX 语法简介

JSX - 是 JS 的扩展，写在 JS 代码里面，组件的 UI 结构语法和 HTML 相似，有 HTML 相关基础，学起来很容易JSX 已成 ES 规范（不是React独有），可用于其他的框架，如 Vue3

注：需要用 Js 语法写的时候，文件后缀名就是 .jsx ；需要用 Ts 语法写的时候，文件后缀名就是 .tsx

示例代码：

// App.tsx 代码

import React from 'react'

import logo from './logo.svg'

import './App.css'

function App() {

return (

)

}

export default App

二、和 HTML 标签的几点不同

首字母大小写的区别，首字母大写是自定义组件标签必须闭合，如 在 HTML 中合法，但在 JSX 中是非法的每段 JSX 代码片段都必须要有一个根节点，根节点可以是空标签 <> 。如下图所示：

三、JSX 属性

class 要改成 classNamestyle 要使用 JS 对象（不能是 string ）而且 key 用驼峰写法for 要改为 htmlFor

四、JSX 事件

事件就是那些什么 点击事件、监听事件等

使用 onXxx 的格式必须传入一个函数（是 fn 而非 fn() ）注意 TypeScript 类型（初学着不着急深究，会用，不报错即可 ）

4.1 简单点击事件

4.2 类型限制

4.3 带参数，箭头函数

五、插入 JS 变量

使用 { XXX } 可以插入 JS 变量、函数、表达式可插入普通文本、属性可用于注释

六、JSX 中使用条件判断

使用 &&使用 三元表达式使用 函数

七、循环

使用数组 map每个 item 元素需要 key 属性key 在同级别唯一

推荐链接

 您阅读本篇文章共花了：