【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. 总结