React开发实践：掌握Redux与Hooks应用最新章节_袁龙著

2.6　JSX语法详解

在前面的章节中，我们尝试了React开发，并且简单地使用了JSX语法。接下来将更详细地讲解React的JSX语法，包括基本使用、嵌入表达式、绑定属性、动态设置class属性等。

2.6.1　JSX基本使用

JSX语法是在React应用程序中使用的JavaScript语法扩展，它支持在JavaScript代码中编写类似HTML的结构，以创建可复用的组件。通过使用JSX，开发者可以更方便地构建用户界面，提高代码的可读性和可维护性。

JSX语法基本上是将HTML标记混合到JavaScript代码中。在JSX中，我们可以使用类似HTML的标签和属性，创建元素并描述它们的外观和行为。这种标记结构非常直观和易于理解，使得开发者更容易将设计概念转化为实际的用户界面。

接下来用一个简单的实例说明JSX语法的基本使用。假设我们正在开发一个电子商务平台，需要显示产品的价格和库存信息。使用JSX，可以轻松地创建一个商品卡片组件，且代码结构更易读。

首先，定义一个名为ProductCard的组件。使用JSX语法描述商品卡片的结构和外观，包括图片、标题、价格和库存信息。示例代码如下。

在这个例子中，我们使用了HTML标签（如<div>、<h3>、<p>）定义元素的结构，使用大括号（{}）插入JavaScript表达式。通过这种方式，可以动态地渲染商品卡片的信息，保持界面的实时性。

接下来，详细介绍一下大括号（{}）中可以渲染的内容。总体而言，可以将其分为三种情况。

首先，如果变量是Number、String或Array类型，那么可以直接进行渲染操作。这意味着可以在大括号中插入这些变量，并将它们正确地显示出来。

其次，如果变量是null、undefined或Boolean类型，则在渲染时，大括号中的内容将为空。这意味着无法显示这些变量的值，但仍然可以在其他逻辑中使用它们。

最后，如果变量是Object对象类型，则无法在大括号中进行渲染，但是可以渲染对象中的属性。

总结一下，JSX语法是一种强大而直观的工具，使开发人员能够更轻松地构建React应用程序的用户界面。它将HTML标记和JavaScript代码结合在一起，提供了更明确、更易读的开发体验。无论是创建简单的组件还是构建复杂的用户界面，JSX都可以帮助我们以更高效和更可维护的方式完成任务。

2.6.2　JSX中嵌入表达式

在2.6.1节中，我们学习了JSX语法的基本使用。然而，JSX的强大之处不仅仅局限于简单的变量插入。本节将深入探索JSX的更多高级特性，包括插入不同类型的表达式、字符串拼接、三元表达式和执行函数等。

1．插入表达式

在JSX中，我们可以插入各种表达式实现动态内容的展示。例如，可以使用{10+20}表达式计算并显示结果，或者通过字符串拼接的方式将多个变量组合成一个字符串进行渲染。

1）数学运算

```jsx
const jsxElement = <div>{10+20}</div>;
```

这段代码会将10+20的结果（30）插入到<div>元素中。

2）字符串拼接

```jsx
const name = "Tom";
const jsxElement = <div>欢迎，{name}！您的账户余额是：{500}元</div>;
```

变量name和固定字符串将会被拼接起来，并插入到<div>元素中。

3）三元表达式

```jsx
const age = 18;
const jsxElement = <div>您的年龄：{age >= 18 ? "成年" : "未成年"}</div>;
```

根据条件判断，将不同的字符串插入到<div>元素中。

2．执行一个函数

除了插入变量和表达式，我们还可以在JSX中执行函数。示例代码如下。

```jsx
function greet(name) {
  return <div>欢迎，{name}！</div>;
}

const username = "张三";
const jsxElement = greet(username);
```

通过调用greet()函数，将返回的JSX元素插入到页面中。

通过本节的学习可以看到，JSX不仅仅是一种方便编写HTML的语法糖，还提供了丰富的特性来更好地构建动态和可交互的用户界面。掌握这些高级技巧，将使开发更加灵活和高效。

2.6.3　JSX绑定属性

在React中，我们经常需要给元素绑定属性，以实现不同的功能和样式。例如，可以给div元素添加title属性、class属性，给img元素添加src属性，给a标签添加href属性，等等。设置这些属性将为产品带来更多的便利和更好的用户体验。

下面是一个实际的案例，展示如何通过JSX设置元素的class属性，示例代码如下。

```jsx
class MyComponent extends React.Component {
  render() {
    return (
      <div className="container">
        <h1>Hello, world!</h1>
        <p>Welcome to my website.</p>
        <button className="btn">按钮</button>
      </div>
    );
  }
}
```

在这个例子中，我们为div元素绑定了一个class属性，值为"container"。使用className而不是class，是因为class是JavaScript关键字。

除了绑定常见的HTML属性，我们还可以使用行内样式属性为元素添加样式。通过JSX绑定行内style属性，可以通过JavaScript对象的方式动态设置元素的样式。

以下是一个示例代码，展示如何通过JSX绑定行内style属性设置元素的背景颜色为红色。

```jsx
class MyComponent extends React.Component {
  render() {
    const style = {
      backgroundColor: 'red',
    };
    return (
      <div style={style}>
        <h1>Hello, world!</h1>
        <p>Welcome to my website.</p>
      </div>
    );
  }
}
```

在这个示例中，我们使用了名为style的变量保存JavaScript对象，其背景颜色为红色。通过将这个变量作为行内style属性的值进行绑定，最后成功地将元素的背景颜色设置为红色。通过这种方式绑定行内样式属性，可以自由地进行样式的设置。

接下来，我们给img元素绑定src属性。在React中，可以使用JSX绑定属性动态设置图片的路径。同样地，只需使用大括号将属性值包裹起来即可。例如，要给img元素绑定src属性，并且将属性值设置为一个变量imageUrl，示例代码如下。

```jsx
<img src={imageUrl} />
```

需要注意的是，属性值可以是任何合法的JavaScript表达式，例如函数调用、变量等。这样就可以根据实际情况来动态设置属性值，实现更加灵活的组件渲染。例如，可以通过调用函数来获取图片路径，然后将函数返回的结果作为属性值传递给img元素，示例代码如下。

```jsx
<img src={getImageUrl()} />
```

最后，来看给a标签绑定href属性的案例。在React中，给a标签绑定href属性的方式与给其他元素绑定属性的方式是相同的，同样可以使用JSX绑定属性设置属性值。例如，要给a标签绑定href属性，并且让属性值为"https://www.baidu.com"，示例代码如下。

```jsx
<a href={"https://www.baidu.com"}>单击这里</a>
```

通过这些案例，我们可以清楚地了解JSX绑定属性的使用方法。无论是给div元素绑定title属性，给img元素绑定src属性，还是给a标签绑定href属性，我们都可以使用相同的方式实现。使用JSX绑定属性能够更加灵活地组织组件的结构，实现更加丰富的交互和视觉效果。

希望通过本节内容的学习，你已经掌握了JSX绑定属性的使用方法，并且能够在实际项目中灵活运用！

2.6.4　动态设置class属性

在2.6.3节中，我们学习了如何使用className属性为元素设置类样式。这是一种非常常用的方法，可以轻松修改元素的外观。本节将通过实际案例演示如何使用React动态添加类。

来看一个简单的案例，假设有一个H1标签和一个按钮，当用户单击按钮时为H1标签动态增加content类，从而改变元素样式，示例代码如下。

上述案例实现了单击按钮动态为h1元素添加和删除类，通过isActive属性控制类的删除和添加。

通过这个案例，可以了解如何使用React实现动态添加类的效果，从而根据不同的情况改变元素的样式。

动态添加样式的第二种方式是将类样式统一放在数组中管理，示例代码如下。

上述案例将类样式统一放在名为classList的数组中。在这个数组中，通过判断isActive变量的值是否为true，动态向数组中追加content类。需要提醒的是，在使用JSX代码渲染数组时，默认会使用逗号进行拼接。但是，我们可以使用join()方法将其设置为空格拼接。

2.6 JSX语法详解

2.6.1 JSX基本使用

2.6.2 JSX中嵌入表达式