【TS入门笔记8---了解JSX】

TypeScript—了解JSX

一、什么是 JSX？

1. 初始化项目

JSX（JavaScript XML）是 React 提出的 JavaScript 的语法扩展，可以让你在 JavaScript 中写出类似 HTML 的结构：

const element = <h1>Hello, world!</h1>;

它最终会被编译为 React.createElement 调用，比如：

const element = React.createElement('h1', null, 'Hello, world!');

2.JSX 基础语法

1） 元素标签

const element = <div>Hello</div>;

必须闭合所有标签：

const img = <img src="xx" />; // 正确

2）表达式插值
用 {} 插入 JavaScript 表达式：

const name = "Tom";
const greeting = <h1>Hello, {name}!</h1>;

3）属性（Props）语法

const link = <a href="https://example.com">Link</a>;
const button = <button disabled={true}>Click</button>;

注意区别：
className=“btn” // 正确（不是 class）
htmlFor=“nameInput” // label 标签用 htmlFor

3.JSX 进阶用法

1）条件渲染

{isLoggedIn ? <LogoutButton /> : <LoginButton />}
{messages.length > 0 && <Notification />}

2）列表渲染（需加 key）

const items = ['a', 'b', 'c'];
const list = (<ul>{items.map((item, index) => <li key={index}>{item}</li>)}</ul>
);

3）多个元素：用 Fragment 或 div 包裹

// 推荐写法：Fragment
<><h1>Title</h1><p>Description</p>
</>

也可以显式写 <React.Fragment>…</React.Fragment>。

4. JSX 与函数组件结合

function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}const App = () => <Welcome name="Alice" />;

5. JSX 编译机制（了解）

JSX 会被 Babel 编译为如下形式：

const element = <h1>Hello</h1>;
// 编译后：
const element = React.createElement('h1', null, 'Hello');

6. 自定义组件与区分

JSX 元素如果以大写字母开头，则被当作组件：

function MyComponent() {return <div>Custom</div>;
}const app = <MyComponent />; 

小写字母的会被当作 HTML 标签：

const x = <mycomponent />; // 被当作原生 HTML 标签

7. 样式处理

const divStyle = {color: 'blue',fontSize: 20
};const element = <div style={divStyle}>Styled</div>;

注意：样式属性用驼峰命名。

8. JSX 支持的表达式类型

JSX 只能插入表达式，不能插入语句：

//  可以
const el = <div>{1 + 2}</div>;//  不可以放 if、for、函数定义
const el = <div>{if (a) {} }</div>; //  错误

9. JSX 小技巧

1）逻辑短路避免 undefined

{maybeValue && <span>{maybeValue}</span>}

2）在 map 渲染中直接 destructure

{list.map(({ name, age }) => (<li key={name}>{name} - {age}</li>
))}

10. TSX（TypeScript + JSX）

1）添加类型

type Props = {name: string;age?: number;
};function Profile({ name, age }: Props) {return <div>{name} - {age}</div>;
}

2）组件定义方式

const Profile: React.FC<Props> = ({ name, age }) => (<div>{name} - {age}</div>
);

11. 总结

语法/特性	示例	说明
标签	<div></div>	必须闭合
表达式插值	{user.name}	用 {} 插入表达式
条件渲染	{flag ? <A /> : <B />}	三元/&& 渲染
列表渲染	{arr.map(...)}	加 key 属性
样式	style={{ color: 'red' }}	对象格式，驼峰命名
class 属性	className="abc"	JSX 使用 className
Fragment	<>...</>	避免多余 div
TS 组件类型	React.FC<Props>	在 TS 中约束 props