React JSX

正如我们已经看到的，所有的 React 组件都有一个 render 函数。render 函数指定了 React 组件的 HTML 输出。JSX(JavaScript 扩展)，是一个 React 扩展，允许编写看起来像 HTML 的 JavaScript 代码。换句话说，JSX 是一种由 React 使用的类似 HTML 的语法，它扩展了 ECMAScript，以便类似 HTML 的语法可以与 JavaScript/React 代码共存。该语法被 预处理器 (即 Babel 这样的转换编译器) 用于将类似 HTML 的语法转换为 JavaScript 引擎可以解析的标准 JavaScript 对象。

JSX 允许你在同一个文件中编写类似 HTML/XML 的结构 (例如，类似 DOM 的树结构)，你在其中编写 JavaScript 代码，然后预处理器会将这些表达式转换为实际的 JavaScript 代码。就像 XML/HTML 一样，JSX 标签有一个标签名、属性和子元素。

示例

在这里，我们将在 JSX 文件中编写 JSX 语法，并查看由预处理器 (Babel) 转换的相应 JavaScript 代码。

JSX 文件

相应的输出

上面这行代码创建了一个 react element 并且传递了 三个参数 在里面，第一个是元素的名字，也就是div，第二个是在 div 标签中传递的 属性，最后一个是传递的 内容，也就是 "Hello Tpoint Tech"。

为什么要使用 JSX？

• 它比普通的 JavaScript 更快，因为它在将代码翻译成 JavaScript 时执行优化。
• React 没有将标记和逻辑放在单独的文件中来分离技术，而是使用包含两者的组件。我们将在后面的章节中学习组件。
• 它是类型安全的，并且大多数错误都可以在编译时发现。
• 它可以很容易地创建模板。

JSX 中的嵌套元素

要使用多个元素，需要用一个容器元素将其包裹起来。在这里，我们使用 div 作为容器元素，它内部有 三个 嵌套元素。

App.JSX

输出

JSX 属性

JSX 使用带有 HTML 元素的属性，与普通 HTML 相同。JSX 使用 驼峰式 命名约定来命名属性，而不是 HTML 的标准命名约定，例如 HTML 中的 class 在 JSX 中变为 className，因为 class 是 JavaScript 中的保留关键字。我们也可以在 JSX 中使用我们自己的自定义属性。对于自定义属性，我们需要使用 data-prefix。在下面的示例中，我们使用了一个自定义属性 data-demoAttribute 作为 <p> 标签的属性。

示例

输出

在 JSX 中，我们可以用两种方式指定属性值

1. 作为字符串字面量： 我们可以用双引号指定属性的值

示例

输出

2. 作为表达式： 我们可以使用花括号 {} 将属性的值指定为表达式

示例

输出

45

JSX 注释

JSX 允许我们使用以 /* 开头并以 */ 结尾的注释，并将它们包裹在花括号 {} 中，就像 JSX 表达式一样。下面的例子展示了如何在 JSX 中使用注释。

示例

输出

我们可以看到注释没有显示在结果中。

JSX 样式

React 总是建议使用 内联 样式。要设置内联样式，你需要使用 camelCase 语法。React 自动允许在特定元素的数字值后附加 px。下面的例子展示了如何在元素中使用样式。

示例

输出

注意：JSX 不允许使用 if-else 语句。作为替代，你可以使用条件（三元）表达式。

使用条件表达式

可以在下面的例子中看到。

示例

输出

False!