JSX 基础

JSX 是什么

const greeting = <h1>Hello World</h1>;

看起来像 HTML，实际是 JavaScript 表达式。编译后变成：

const greeting = React.createElement('h1', null, 'Hello World');

JSX = JS + 类 HTML 语法糖——可读性远好于纯函数调用。

5 个核心规则

1. 只能返回一个根元素

// ❌ 错
return (
    <h1>Title</h1>
    <p>Body</p>
);

// ✓ 用 Fragment
return (
    <>
        <h1>Title</h1>
        <p>Body</p>
    </>
);

<></> 是 React.Fragment 的简写——不渲染额外的 div。

2. 闭合所有标签

// ❌ HTML 风格不行
<img src="...">
<br>

// ✓ JSX 要自闭合
<img src="..." />
<br />

3. 大括号 `{}` 嵌 JS 表达式

const name = 'Alice';
const age = 30;

return (
    <div>
        <h1>Hello {name}</h1>
        <p>Age: {age}</p>
        <p>Next year: {age + 1}</p>
        <p>Random: {Math.random()}</p>
    </div>
);

⚠ 只能放表达式——不能放语句（if / for / 变量声明）。

4. `class` 改成 `className`

// ❌
<div class="container">

// ✓
<div className="container">

因为 class 是 JS 关键字。同理 for 改成 htmlFor。

5. 内联样式是对象

// ❌ 字符串
<div style="color: red; padding: 10px">

// ✓ 对象
<div style={{ color: 'red', padding: '10px' }}>

// 注意：CSS 属性名用驼峰（backgroundColor 不是 background-color）
<div style={{ backgroundColor: 'blue', fontSize: 16 }}>

条件渲染

// 短路（最常用）
{isLoggedIn && <UserMenu />}

// 三元
{isLoggedIn ? <UserMenu /> : <LoginButton />}

// 提取变量（复杂时）
let content;
if (loading) content = <Spinner />;
else if (error) content = <Error message={error} />;
else content = <List items={data} />;

return <main>{content}</main>;

列表渲染

const items = ['apple', 'banana', 'cherry'];

return (
    <ul>
        {items.map((item, i) => (
            <li key={item}>{item}</li>     // ★ 必须有 key
        ))}
    </ul>
);

key 必须唯一 + 稳定——不要用 array index 当 key（除非列表不变）。

事件

<button onClick={() => alert('clicked')}>Click</button>

// 提取函数
function handleClick() {
    alert('clicked');
}

<button onClick={handleClick}>Click</button>

// 注意：是 onClick 不是 onclick；驼峰

不能在 JSX 里写

if/else（用三元 / 短路）
for/while（用 .map）
let/const（要放函数体里）
注释直接写——要 {/* 这样 */}

完整例子

function UserCard({ user, isOnline }) {
    return (
        <div className="card">
            <img src={user.avatar} alt={user.name} />
            <h2>{user.name}</h2>
            <p style={{ color: isOnline ? 'green' : 'gray' }}>
                {isOnline ? '在线' : '离线'}
            </p>
            <ul>
                {user.tags.map(tag => (
                    <li key={tag}>{tag}</li>
                ))}
            </ul>
        </div>
    );
}

坑

key 用 array index → 列表重排时 React 误判
JSX 大括号里只能写表达式——{if (x)} 报错
空字符串 "" 是 falsy 但会被渲染——用 !! 转
{0} 会渲染出 "0"——{count && <p>有 {count} 条</p>} 当 count=0 时显示 "0"，要 count > 0 &&

下一篇：组件 + Props。