# JSX 表达式与语法规则

URL: https://caijiao.org/react/chapter3/jsx-syntax
Source: docs/react/chapter3/jsx-syntax.md
Description: JSX 表达式和语法规则是 React 中构建 UI 的基础。掌握这些规则有助于开发者高效地创建和管理 UI 组件。

JSX 是 JavaScript 的语法扩展，它允许我们在 JavaScript 中编写类似 HTML 的代码。掌握 JSX 的表达式和语法规则对于 React 开发至关重要。

## 1. 插入 JavaScript 表达式

在 JSX 中，可以使用 `{}` 来插入 JavaScript 表达式。这意味着我们可以在 JSX 中嵌入变量、函数调用和其他 JavaScript 表达式。示例如下：
```jsx
const name = "React";
const element = <h1>Hello, {name}!</h1>;
````

在上述代码中，`{name}` 会被替换为 `name` 变量的值，即 `React`。

## 2. JSX 中的条件渲染

JSX 本身不支持 `if` 或 `else` 语句，但可以通过 JavaScript 条件表达式（如三元运算符）来进行条件渲染：

```jsx
const isLoggedIn = true;
const button = (
  <button>
    {isLoggedIn ? 'Logout' : 'Login'}
  </button>
);
```

在这个例子中，`isLoggedIn` 为 `true` 时，按钮显示 `Logout`，否则显示 `Login`。

## 3. 使用逻辑运算符

对于一些逻辑判断，常用的方式是使用逻辑与 (`&&`) 运算符。例如，只在某些条件下渲染一个元素：

```jsx
const messages = ['Message 1', 'Message 2'];
const element = (
  <div>
    {messages.length > 0 && <h2>You have new messages!</h2>}
  </div>
);
```

只有当 `messages.length > 0` 为 `true` 时，才会渲染 `<h2>` 标签。

## 4. 自定义组件

React 组件可以像 HTML 元素一样在 JSX 中使用。自定义组件的首字母通常是大写的。例如，创建一个 `Welcome` 组件：

```jsx
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = ;
```

在上面的代码中，`` 是一个 React 组件，可以接收 `props` 并渲染动态内容。

## 5. JSX 中的注释

在 JSX 中，注释必须使用 `{/* */}` 的语法，而不是传统的 HTML 注释语法 `<!-- -->`：

```jsx
const element = (
  <div>
    {/* This is a comment */}
    <h1>Hello, World!</h1>
  </div>
);
```

这种语法确保注释仅出现在 JavaScript 中，而不会影响最终渲染的 HTML。

## 6. 多行 JSX

当 JSX 内容跨越多行时，需要将它们包裹在一个单一的父元素中。React 要求每个组件或表达式必须有一个根元素。例如：

```jsx
// 无效的 JSX
return (
  <h1>Hello</h1>
  <h2>World</h2>
);

// 正确的 JSX
return (
  <div>
    <h1>Hello</h1>
    <h2>World</h2>
  </div>
);
```

或者，可以使用 React Fragment `<> </>` 来避免多余的 DOM 元素：

```jsx
return (
  <>
    <h1>Hello</h1>
    <h2>World</h2>
  </>
);
```

## 7. 使用 `key` 在列表中渲染元素

当使用 JSX 渲染列表时，必须为每个元素指定唯一的 `key` 属性。这样 React 才能高效地更新和重排组件。例如：

```jsx
const listItems = ['Apple', 'Banana', 'Cherry'];
const element = (
  <ul>
    {listItems.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);
```

在此示例中，`key={index}` 是必须的，以便 React 在渲染时能跟踪每个列表项。

## 8. JSX 语法糖

JSX 可以让你以一种简洁的方式编写组件和 UI。例如，我们可以通过 `className` 来设置类，使用 `htmlFor` 代替 `for` 来设置标签的 `for` 属性，这些都是 JSX 的语法糖。

## 总结

JSX 是 React 中非常强大的工具，它让你能够在 JavaScript 代码中直接写 HTML。了解 JSX 的表达式和语法规则，将帮助你更高效地构建 React 组件和管理 UI 逻辑。