6 JSX 语法基础

什么是 JSX？

JSX（JavaScript XML）是一种 JavaScript 的语法扩展，用于描述用户界面。通过 JSX，我们可以在 JavaScript 代码中轻松写出 HTML 结构，同时可以与 JavaScript 表达式相结合，极大地方便了界面的构建。

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

在上述代码中，<h1>Hello, world!</h1> 就是一个 JSX 表达式，它表示一个 HTML 元素。

JSX 的基本语法

1. 嵌套的 JSX

JSX 允许将多个元素嵌套在一起。以下是一个嵌套的示例：

const element = (
  <div>
    <h1>Hello, world!</h1>
    <p>Welcome to learning React!</p>
  </div>
);

在这个例子中，<div> 元素内部嵌套了一个 <h1> 和一个 <p> 元素。

2. 使用 JavaScript 表达式

在 JSX 中，我们可以使用大括号 {} 将 JavaScript 表达式嵌入到 JSX 代码中。例如：

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

在这里，{name} 被替换为变量 name 的值，即 “Jane Doe”。

3. JSX 中的属性

JSX 也允许我们在 HTML 元素中添加属性，如同在 HTML 中一样。属性值可以是字符串、表达式或其他变量。例如：

const element = <img src="avatar.png" alt="User Avatar" />;

对于表达式，可以这样使用：

const imageUrl = "avatar.png";
const element = <img src={imageUrl} alt="User Avatar" />;

4. JSX 表达式的条件渲染

在 JSX 中，我们可以通过 JavaScript 的条件语句来实现条件渲染。以下是一个使用三元运算符的例子：

const isLoggedIn = true;
const element = (
  <div>
    {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}
  </div>
);

5. JSX 列表渲染

我们可以通过 map 方法在 JSX 中渲染列表。以下是一个示例：

const fruits = ['Apple', 'Banana', 'Cherry'];

const elements = (
  <ul>
    {fruits.map((fruit, index) => (
      <li key={index}>{fruit}</li>
    ))}
  </ul>
);

在这个例子中，我们使用 map 方法遍历 fruits 数组，为每个水果生成一个 <li> 元素。

6. JSX 的注意事项

• 使用唯一的 key 属性：在列表渲染时，React 要求每个元素都有一个唯一的 key 属性，以便于高效更新和渲染。

• 不能返回多个根节点：JSX 中的每个返回值必须是一个单独的根元素，例如我们可以通过 <div> 或 <>（Fragment）来包裹多个元素：

  const element = (
    <>
      <h1>Hello!</h1>
      <p>This is a paragraph.</p>
    </>
  );

7. 将 JSX 转换为 JavaScript

JSX 代码在构建时会被 Babel 转换为 JavaScript。上面的 JSX 代码将被转化为如下形式：

const element = React.createElement(
  'h1',
  null,
  'Hello, world!'
);

这意味着你可以在使用 React 时，完全不使用 JSX，但它的可读性和便利性使得 JSX 成为首选。

小结

JSX 是React中用于描述 UI 的一种强大工具。通过理解它的基本语法和使用方式，你将能够更轻松地构建复杂的用户界面。在实践中多加练习以上点，能够帮助你快速上手 React 框架。