JSX 表达式与语法规则

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

1. 插入 JavaScript 表达式

在 JSX 中，可以使用 {} 来插入 JavaScript 表达式。这意味着我们可以在 JSX 中嵌入变量、函数调用和其他 JavaScript 表达式。示例如下：

const name = "React";
const element = <h1>Hello, {name}!</h1>;

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

2. JSX 中的条件渲染

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

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

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

3. 使用逻辑运算符

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

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 组件：

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

const element = <Welcome name="React" />;

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

5. JSX 中的注释

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

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

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

6. 多行 JSX

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

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

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

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

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

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

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

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 逻辑。