React 是一种流行的 JavaScript 库，用于构建用户界面。它使用一种称为 JSX 的语法扩展来描述 UI 组件。JSX 是一种类似 HTML 的语法，它允许您在 JavaScript 代码中编写类似于 HTML 的标记。在本文中，我们将介绍如何使用 ES2021 中的 JSX 来构建 React 代码。
什么是 JSX？
JSX 是一种将 XML 语法扩展到 JavaScript 的语法扩展。它允许您在 JavaScript 代码中编写类似于 HTML 的标记。在 React 中，JSX 用于描述 UI 组件的外观和行为。
下面是一个简单的 JSX 示例：
----- ------- - ---------- ------------
在这个例子中，我们使用 JSX 创建了一个 <h1> 元素，并将其赋值给名为 element 的变量。
如何在 React 中使用 JSX？
要在 React 中使用 JSX，您需要使用一个编译器将 JSX 代码转换为普通的 JavaScript 代码。React 提供了一个称为 Babel 的工具，它可以将 JSX 代码转换为普通的 JavaScript 代码。
首先，您需要安装 babel 和 babel-preset-react：
--- ------- ---------- ----------- -------------------
然后，您需要在项目的根目录中创建一个名为 .babelrc 的文件，并将以下内容添加到其中：
- ---------- ----------------------- -
现在，您可以使用 babel 命令将 JSX 代码转换为普通的 JavaScript 代码：
----- --- --------- ---
在上面的命令中，src 是包含 JSX 代码的目录，lib 是编译后的代码将被输出的目录。
如何在 JSX 中编写 React 组件？
在 JSX 中编写 React 组件与在普通的 JavaScript 中编写 React 组件非常相似。下面是一个简单的 JSX 示例，其中包含一个名为 Hello 的组件：
------ ----- ---- -------- -------- ------------ - ------ ---------- ------------------- - ------ ------- ------
在上面的代码中，我们使用 import 语句导入了 React 模块。然后，我们定义了一个名为 Hello 的函数组件，该组件接受一个名为 props 的参数，并返回一个包含 props.name 的 <h1> 元素。最后，我们使用 export default 语句将组件导出。
如何在 JSX 中使用属性？
在 JSX 中，您可以使用属性来向组件传递数据。属性以名称/值对的形式出现，并用大括号 {} 包含值。下面是一个简单的 JSX 示例，其中包含一个名为 Hello 的组件，并使用属性向其传递一个名为 name 的值：
------ ----- ---- -------- -------- ------------ - ------ ---------- ------------------- - ------ ------- -------- ----- - ------ ------ ------------ --- -
在上面的代码中，我们定义了一个名为 App 的组件，该组件返回一个 Hello 组件，并使用 name 属性将值 world 传递给它。
如何在 JSX 中使用表达式？
在 JSX 中，您可以使用大括号 {} 来包含任何 JavaScript 表达式。下面是一个简单的 JSX 示例，其中使用表达式计算一个名为 sum 的值，并将其传递给 Hello 组件：
------ ----- ---- -------- -------- ------------ - ------ ---------- ------------- --- --- -- --- -- ------------------ - ------ ------- -------- ----- - ----- --- - - - -- ------ ------ ------------ --------- --- -
在上面的代码中，我们定义了一个名为 sum 的变量，并将其设置为 1 + 2 的值。然后，我们在 App 组件中使用 Hello 组件，并使用 {} 包含表达式 sum 的值。
如何在 JSX 中使用样式？
在 JSX 中，您可以使用 style 属性来为元素设置样式。style 属性需要一个 JavaScript 对象，其中属性名是 CSS 样式的名称，属性值是要应用的值。下面是一个简单的 JSX 示例，其中设置了一个名为 style 的样式对象，并将其传递给 Hello 组件：
------ ----- ---- --------
-------- ------------ -
----- ----- - -
------ ------
----------- -------
--
------ --- -------------------- -------------------
-
------ ------- -------- ----- -
------ ------ ------------ ---
-在上面的代码中，我们定义了一个名为 style 的对象，并设置了两个 CSS 样式属性。然后，我们在 Hello 组件中使用 style 属性，并将其设置为样式对象。
如何在 JSX 中使用条件语句？
在 JSX 中，您可以使用 JavaScript 的条件语句来根据条件显示不同的内容。下面是一个简单的 JSX 示例，其中使用条件语句显示不同的消息：
------ ----- ---- --------
-------- ------------ -
-- ------------ -
------ ---------- -------------------
-
------ ---------- ---------------
-
------ ------- -------- ----- -
------ -
--
------ ------------ --
------ --
---
--
-在上面的代码中，我们定义了一个名为 Hello 的组件，该组件使用条件语句显示不同的消息。如果 props.name 存在，则显示 Hello, {props.name}!，否则显示 Hello, stranger!。然后，我们在 App 组件中使用两个 Hello 组件，一个带有 name 属性，另一个不带属性。
如何在 JSX 中使用循环语句？
在 JSX 中，您可以使用 JavaScript 的循环语句来生成重复的内容。下面是一个简单的 JSX 示例，其中使用循环语句生成一组列表项：
------ ----- ---- --------
------ ------- -------- ----- -
----- ----- - --------- --------- ----------
------ -
----
----------------- -- -
--- ----------------------
---
-----
--
-在上面的代码中，我们定义了一个名为 items 的数组，并使用 map 方法将其转换为一组 <li> 元素。然后，我们在 App 组件中使用 <ul> 元素和生成的 <li> 元素。
结论
在本文中，我们介绍了如何使用 ES2021 中的 JSX 来构建 React 代码。我们讨论了如何在 JSX 中编写 React 组件、如何使用属性、表达式、样式、条件语句和循环语句。希望这篇文章能够帮助您更好地理解 JSX 和 React，并为您构建更好的用户界面提供指导。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672828612e7021665e1f4074