Jsx语法与规则

文章索引

好，我们继续！现在进入 第 2 步：JSX 语法与规则。

🧠 JSX 是什么？

JSX（JavaScript XML）是 React 推荐的写法，它让你可以在 JavaScript 中写 HTML 结构。

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

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

JSX 不是浏览器能直接识别的代码，它最终会被转换成 React.createElement(…) 的形式。

🧱 JSX 的核心语法规则

1️⃣ 最外层只能有一个父元素

// ✅ 正确
return (
  <div>
    <h1>标题</h1>
    <p>内容</p>
  </div>
);

// ❌ 错误：不能返回多个并列元素
return (
  <h1>标题</h1>
  <p>内容</p>
);

// ✅ 正确

return (

<div>

</div>

);

// ❌ 错误：不能返回多个并列元素

return (

);

✅ 小技巧：你可以用 <>…</>（Fragment）包裹多个元素，而不增加额外标签：

return (
  <>
    <h1>标题</h1>
    <p>内容</p>
  </>
);

return (

</>

);

2️⃣ 属性命名采用 camelCase（小驼峰命名）

// HTML: onclick -> JSX: onClick
<button onClick={handleClick}>点击</button>

// class -> className
<div className="container">内容</div>

// HTML: onclick -> JSX: onClick

// class -> className

3️⃣ 表达式用 {} 包裹

const name = 'Millie';

return (
  <h1>Hello, {name}!</h1>
);

const name = 'Millie';

return (

<h1>Hello, {name}!</h1>

);

你可以在 {} 中写表达式，但不能写语句（如 if、for）。

4️⃣ 标签必须闭合

// 正确
<img src="logo.png" />
<input type="text" />

// 错误（JSX 不能像 HTML 一样省略闭合）
<img src="logo.png">

// 正确

// 错误（JSX 不能像 HTML 一样省略闭合）

5️⃣ 字符串属性可以省略大括号

// 都可以
<img src="logo.png" />
<img src={"logo.png"} />

// 都可以

🧪 实战示例：展示当前时间

我们来写个小组件，展示当前时间：

function App() {
  const now = new Date().toLocaleTimeString();

  return (
    <div>
      <h1>当前时间</h1>
      <p>{now}</p>
    </div>
  );
}

export default App;

function App() {

const now = new Date().toLocaleTimeString();

return (

<div>

</div>

);

}

export default App;

✅ 小练习

想练习一下吗？你可以试试：

在页面上添加自己的名字和喜欢的颜色
用 style={{ color: ‘blue’ }} 给文字加样式
用 Fragment <>…</> 返回两个段落

准备好后，我们就可以进入下一步：

第 3 步：组件的概念（函数组件 vs 类组件）