如何使用 JSX 创建 React 元素

  • 405视图
  • 18 分钟阅读
哈迪·巴哈多里
  • 2024 年 7 月 4 日
0 股票
0
0
0
0
0
股票
0
0
0
0

介绍

在本教程中，您将学习如何使用 JSX 描述元素。JSX 是一种抽象层，它允许您在 JavaScript 代码中编写类似 HTML 的语法，从而创建看起来像标准 HTML 标记的 React 组件。JSX 是 React 元素的模板语言，因此也是 React 在应用程序中提供的所有标记的基础。.

由于 JSX 允许你在标记中编写 JavaScript，因此你可以使用 JavaScript 函数和方法，包括数组映射和条件语句的短路求值。.

在本教程中，您将直接在标记中捕获按钮点击事件，并捕获语法与标准 HTML 不完全匹配的内容，例如 CSS 类。在本教程结束时，您将拥有一个使用各种 JSX 特性来显示带有内置点击监听器的元素列表的应用程序。这是 React 应用程序中的常见模式，您将在整个框架课程中经常用到。您还将能够将标准 HTML 元素与 JavaScript 结合使用，了解 React 如何帮助您创建小型、可重用的代码。.

先决条件
  • 你需要一个可以运行Node.js的开发环境。
  • 你应该能够使用 Create React App 创建一个应用程序。.
  • 您还需要具备 JavaScript 的基础知识。

步骤 1 – 向 React 元素添加标记

如前所述，React 使用一种名为 JSX 的特殊标记语言。它是 HTML 和 JavaScript 语法的结合体，看起来像这样：

<div>
{inventory.filter(item => item.available).map(item => (
<Card>
<div className="title"}>{item.name}</div>
<div className="price">{item.price}</div>
</Card>
))
}
</div>

一些 JavaScript 函数，例如 .filter 和 .map，以及一些标准 HTML 函数，例如 <div> 你会认出来的。但还有其他部分，比如 HTML 和 JavaScript，例如 <card> 和 className。.

这就是 JSX，一种特殊的标记语言，它使 React 组件具有 HTML 的感觉，同时又具备 JavaScript 的强大功能。.

在本步骤中，您将学习如何向现有的 React 元素添加类似 HTML 的基本元素。首先，您需要向 JavaScript 函数添加标准的 HTML 元素，然后在浏览器中查看编译后的代码。您还将对元素进行分组，以便 React 能够以最少的标记和简洁的 HTML 输出编译它们。.

首先，创建一个新项目。在命令行中运行以下脚本，使用 create-react-app 安装一个新项目：

npx create-react-app jsx-tutorial

项目完成后，切换到以下目录：

cd jsx-tutorial

在新标签页或终端窗口中，使用 Create React App 启动脚本启动项目。浏览器会自动更新以反映更改，因此请在工作期间始终运行此脚本：

npm start

您将获得一个正在运行的本地服务器。如果项目没有在浏览器窗口中打开，您可以通过 http://localhost:3000/ 访问它。如果您是从远程服务器运行此程序，则地址为 http://您的IP地址:3000。.

您的浏览器将加载包含于 Create React App 中的 React 应用。.

您将构建一套全新的自定义组件，因此需要先清理一些样板代码，以便创建一个空白项目。首先，请在文本编辑器中打开 App.js 文件。这是将被注入到页面中的根组件。所有组件都将从这里开始。.

在新终端窗口中，进入项目文件夹，并使用以下命令打开 src/App.js 文件：

nano src/App.js

你会看到类似这样的文件：

import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;

现在，删除 `import logo from './logo.svg'` 这行代码以及函数中 `return` 语句之后的所有内容，并将 `return` 语句改为 `null`。最终代码应如下所示：

import React from 'react';
import './App.css';
function App() {
return null;
}
export default App;

保存并退出文本编辑器。.

最后，删除徽标。在终端窗口中，输入以下命令：

rm src/logo.svg

你的应用程序不会用到这个 SVG 文件，所以应该随时删除未使用的文件。从长远来看，这将有助于你更好地组织代码。.

现在，项目的这些部分已经完成，你可以开始探索 JSX 的相关内容了。这种标记语言由 React 编译，最终转换成你在网页上看到的 HTML。简单来说，React 会读取 JSX 并创建一个页面外观的模型，然后创建必要的元素并将它们添加到页面中。.

这意味着你可以编写类似 HTML 的代码，并期望渲染后的 HTML 也类似。但是，这里面有一些需要注意的地方。.

首先，如果您查看运行服务器的选项卡或窗口，您会看到以下内容：

Output
...
./src/App.js
Line 1:8: 'React' is defined but never used no-unused-vars
...

这行代码表明你没有使用导入的 React 代码。当你在代码中添加 `import 'react'` 这行代码时，你实际上是在导入将 JSX 转换为 React 代码的 JavaScript 代码。如果代码中不存在 JSX，则无需导入它。.

我们来添加一些 JSX 代码，让它更有趣一些。首先，将 null 替换成一个“Hello, World”示例：

import React from 'react';
import './App.css';
function App() {
return <h1>Hello, World</h1>;
}
export default App;

保存文件。如果服务器正在运行，查看终端，警告信息将会消失。如果在浏览器中访问该文件，您将看到该信息以 h1 元素的形式显示。.

然后，在标签下 <h1>添加一个包含字符串“我正在编写 JSX”的段落标签。代码如下所示：

import React from 'react';
import './App.css';
function App() {
return(
<h1>Hello, World</h1>
<p>I am writing JSX</p>
)
}
export default App;

由于 JSX 跨越多行，因此需要将表达式用括号括起来。.

保存文件。保存后，您会在运行服务器的终端中看到一个错误：

Output
./src/App.js
Line 7:5: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?
5 | return(
6 | <h1>Hello, World</h1>
> 7 | <p>I am writing JSX</p>
| ^
8 | )
9 | }
10 |

从函数或指令返回 JSX 时，必须返回单个元素。该元素可以包含嵌套子元素，但必须存在一个顶层元素。在本例中，您返回了两个元素。.

解决方法是修改一段小代码。用一个空标签将代码括起来。空标签是一个不包含任何内容的 HTML 元素，看起来像这样：<> 。.

在编辑器中，返回到 ./src/App.js 文件并添加空标签：

import React from 'react';
import './App.css';
function App() {
return(
<>
<h1>Hello, World</h1>
<p>I am writing JSX</p>
</>
)
}
export default App;

空标签会创建一个元素，但它不会在代码编译时添加到最终标记中。这样既能保持代码简洁，又能确保 React 只有一个元素。.

保存代码并退出文件。浏览器将重新加载并显示包含段落元素的更新页面。此外，代码转换后，空标签将被移除。

现在你已经向组件添加了一些基本的 JSX，并且了解了所有 JSX 都应该如何嵌套在组件中，接下来你将为组件添加一些样式。.

步骤 2 – 为具有属性的元素添加样式

在这一步中，你将为组件中的元素设置样式，学习如何将 HTML 属性与 JSX 结合使用。React 提供了许多样式选项。有些需要在 JavaScript 中编写 CSS，有些则使用预处理器。在本教程中，你将使用 CSS 类和导入的 CSS。.

现在你已经有了代码，接下来需要添加一些样式。在文本编辑器中打开 App.css 文件：

nano src/App.css

由于您使用的是新的 JSX，当前的 CSS 将引用已不存在的元素。既然您不再需要这些 CSS，就可以将其删除。.

删除代码后，您将得到一个空文件。.

接下来，您需要为文本添加一些样式。在 src/App.css 文件中添加以下代码：

.container {
display: flex;
flex-direction: column;
align-items: center;
}

在这个代码块中，你创建了一个名为 .container 的 CSS 类选择器，并使用 display: flex 使内容居中。.

保存文件并退出。浏览器会刷新，但不会有任何变化。要看到变化，你需要将 CSS 类添加到你的 React 组件中。打开组件的 JavaScript 代码：

nano src/App.js

CSS 代码已经通过导入语句“./App.css”导入。这意味着 Webpack 会导入代码以创建最终的样式表，但要将 CSS 应用于您的元素，您需要添加类。.

首先，在文本编辑器中，找到空标签。 <> 到 <div> 改变。.

import React from 'react';
import './App.css';
function App() {
return(
<div>
<h1>Hello, World</h1>
<p>I am writing JSX</p>
</div>
)
}
export default App;

在这段代码中，您将空标签（<>）替换成了 div 标签。空标签可以用来对代码进行分组，而无需添加额外的标签，但在这里您应该使用 div 标签，因为空标签不接受任何 HTML 属性。.

接下来，你需要添加类名。JSX 从这里开始与 HTML 有所不同。如果你想给一个普通的 HTML 元素添加类，你可以这样做：

<div class="container">

但由于 JSX 本质上是 JavaScript，因此它也存在一些限制。其中一个限制是 JavaScript 有一些保留关键字。这意味着你不能在任何 JavaScript 代码中使用某些特定的关键字。例如，你不能创建一个名为 `null` 的变量，因为 `null` 已经被保留了。.

其中一个保留字是 `class`。React 通过稍作修改来规避这个保留字。你不用添加 `class` 属性，而是添加 `className` 属性。一般来说，如果某个属性没有按预期工作，可以尝试添加驼峰命名的版本。另一个略有不同的属性是 `for` 属性，它用于 `<div>` 标签。还有一些其他的属性，但幸运的是，这个列表相对较短。.

现在您已经了解了 React 中 class 属性的用法，可以更新代码以添加样式了。在文本编辑器中，将 className="container" 添加到起始 div 标签中：

import React from 'react';
import './App.css';
function App() {
return(
<div className="container">
<h1>Hello, World</h1>
<p>I am writing JSX</p>
</div>
)
}
export default App;

保存文件。保存后，页面将重新加载，内容将居中显示。.

className 属性是 React 特有的。您可以将大多数 HTML 属性添加到 JSX 中，而无需进行任何更改。例如，返回文本编辑器，为元素添加 ID 为 greeting 的属性。 <h1> 您可以自行添加。它将看起来像标准的 HTML：

import React from 'react';
import './App.css';
function App() {
return(
<div className="container">
<h1 id="greeting">Hello, World</h1>
<p>I am writing JSX</p>
</div>
)
}
export default App;

保存页面并重新加载浏览器。就这么简单。.

目前来看，JSX 看起来像标准的 HTML 标记，但它的优势在于它拥有 JavaScript 的强大功能，同时又保持了 HTML 的外观。这意味着你可以赋值变量，并在属性中引用它们。要引用属性，请将其用花括号 {} 包裹，而不是用引号。.

在文本编辑器中，添加以下高亮显示的行以引用某个功能：

import React from 'react';
import './App.css';
function App() {
const greeting = "greeting";
return(
<div className="container">
<h1 id={greeting}>Hello, World</h1>
<p>I am writing JSX</p>
</div>
)
}
export default App;

在这段代码中，你在 return 语句上方创建了一个名为 greeting 的变量，其值为“greeting”，然后将其赋值给标签的 id 属性中的变量。 <h1> 你自己推荐的。.

保存文件并退出。页面内容将保持不变，但会添加一个 ID 标签。.

到目前为止，你只单独使用了一些元素，但你可以使用 JSX 添加许多 HTML 元素并将它们嵌套起来，从而创建复杂的页面。.

为了演示这一点，您可以创建一个包含表情符号列表的页面。这些表情符号.

首先，你需要向页面添加一些元素。在文本编辑器中打开 src/App.js 文件。此时请保持该文件打开状态。.

nano src/App.js

首先，添加表情符号列表，方法是添加以下突出显示内容：

import React from 'react';
import './App.css';
function App() {
const greeting = "greeting";
return(
<div className="container">
<h1 id={greeting}>Hello, World</h1>
<p>I am writing JSX</p>
<ul>
<li>
<button>
<span role="img" aria-label="grinning face" id="grinning face">😀</span>
</button>
</li>
<li>
<button>
<span role="img" aria-label="party popper" id="party popper">🎉</span>
</button>
</li>
<li>
<button>
<span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
</button>
</li>
</ul>
</div>
)
}
export default App;

这里有一个标签。

    你创建了一个表情符号列表。每个表情符号都位于一个元素中。
  • 它位于单独的位置，.

    你也可以在标签中使用表情符号。 <span> 您还为其添加了其他一些属性。每个 span 元素都有一个 role 属性，其角色设置为 img。这会向访问软件发出信号，表明该元素充当图像。此外，每个 <span> 它有一个 aria 标签和一个名为 emoji 的 id 属性。aria 标签用于告诉使用屏幕阅读器的访问者当前显示的内容。稍后在编写事件时，您将使用 id 属性。.

    以这种方式编写代码时，您使用了语义元素，这有助于保持页面可访问性，并便于屏幕阅读器解析。.

    保存并退出文件。浏览器刷新后，您将看到以下内容：

    现在添加一些样式。在文本编辑器中打开 CSS 代码：

    nano src/App.css

    要移除按钮的默认背景和边框，同时增大字体大小，请添加以下高亮显示的代码：

    .container {
display: flex;
flex-direction: column;
align-items: center;
}
button {
font-size: 2em;
border: 0;
padding: 0;
background: none;
cursor: pointer;
}
ul {
display: flex;
padding: 0;
}
li {
margin: 0 20px;
list-style: none;
padding: 0;
}

    在这段代码中，你使用了字体大小、边距和其他参数来调整按钮的外观并更改字体。你还移除了列表样式，并为元素添加了 display: 属性。

      弯腰使其保持水平。.

      保存并关闭 CSS 文件。浏览器刷新后，您将看到以下内容：

      现在你已经接触过几个看起来像普通 HTML 的 JSX 元素。你添加了类、ID 和 aria 标签，并且以字符串和变量的形式处理数据。但 React 还使用属性来指定元素应该如何响应用户事件。接下来，你将通过为按钮添加事件来使页面具有交互性。.

      步骤 3 – 向元素添加事件

      在此步骤中，您将使用特定属性为元素添加事件，并记录按钮元素的点击事件。您将学习如何捕获事件信息以发送其他操作或使用文件范围内的其他信息。.

      现在你已经有了包含信息的主页，接下来需要添加一些事件。你可以为 HTML 元素添加许多事件处理程序。React 提供了对所有这些事件处理程序的访问。由于你的 JavaScript 代码包含在标记中，因此你可以快速添加事件，同时保持代码的良好组织性。.

      首先，添加一个 onclick 事件处理程序。这样，您可以直接向元素添加一些 JavaScript 代码，而无需附加事件监听器：

      import React from 'react';
import './App.css';
function App() {
const greeting = "greeting";
return(
<div className="container">
<h1 id={greeting}>Hello, World</h1>
<p>I am writing JSX</p>
<ul>
<li>
<button
onClick={event => alert(event.target.id)}
>
<span role="img" aria-label="grinning face" id="grinning face">😀</span>
</button>
</li>
<li>
<button
onClick={event => alert(event.target.id)}
>
<span role="img" aria-label="party popper" id="party popper">🎉</span>
</button>
</li>
<li>
<button
onClick={event => alert(event.target.id)}
>
<span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
</button>
</li>
</ul>
</div>
)
}
export default App;

      由于这是 JSX，所以你使用了驼峰式命名法，也就是将 onclick 属性命名为 onClick。onClick 属性使用一个匿名函数来检索被点击项的信息。.

      您添加了一个匿名箭头函数，该函数接收按钮点击事件，并且该事件的目标元素为该元素。 <span> 您需要的信息在 id 属性中，可以通过 event.target.id 访问。您可以使用 alert() 函数启用提示框。.

      保存文件。在浏览器中，点击其中一个表情符号，就会弹出包含其名称的提示框。.

      你可以通过声明一次函数并将其传递给每个 onClick 事件来减少一次迭代。由于该函数除了输入和输出之外不依赖于任何其他内容，因此你可以将其声明在主组件函数之外。换句话说，该函数不需要访问组件的作用域。将它们分开的优势在于，你的组件函数会更简洁一些，而且如果你愿意，以后还可以将该函数移到单独的文件中。.

      在文本编辑器中，创建一个名为 displayEmojiName 的函数，该函数捕获事件并调用 alert() 函数并传入一个标识符。然后将该函数传递给每个 onClick 属性：

      import React from 'react';
import './App.css';
const displayEmojiName = event => alert(event.target.id);
function App() {
const greeting = "greeting";
return(
<div className="container">
<h1 id={greeting}>Hello, World</h1>
<p>I am writing JSX</p>
<ul>
<li>
<button
onClick={displayEmojiName}
>
<span role="img" aria-label="grinning face" id="grinning face">😀</span>
</button>
</li>
<li>
<button
onClick={displayEmojiName}
>
<span role="img" aria-label="party popper" id="party popper">🎉</span>
</button>
</li>
<li>
<button
onClick={displayEmojiName}
>
<span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
</button>
</li>
</ul>
</div>
)
}
export default App;

      保存文件。在浏览器中，点击一个表情符号，你就会看到同样的警告。.

      在这一步中，你为每个元素添加了事件。你还了解到 JSX 如何使用略有不同的元素事件名称，并且你开始编写可重用的代码，方法是获取一个函数并将其应用于多个元素。在下一步中，你将编写一个可重用的函数来返回 JSX 元素，而不是手动编写每个元素。这将进一步减少重复代码。.

      步骤 4 – 映射数据以创建元素

      在这一步中，你将不再仅仅将 JSX 用作简单的标记语言。你将学习如何将其与 JavaScript 结合使用，创建动态标记，从而减少代码量并提高代码可读性。你将把代码转换成一个数组，并通过遍历该数组来创建 HTML 元素。.

      JSX 不像 HTML 那样限制你的操作。它允许你直接在标记中使用 JavaScript。你已经尝试过将函数传递给属性，也使用过变量来重用数据。现在，是时候使用标准的 JavaScript 代码直接从数据创建 JSX 了。.

      在文本编辑器中，你需要在 src/App.js 文件中创建一个表情符号数据数组。如果你关闭了该文件，请重新打开它：

      nano src/App.js

      添加一个数组，其中包含表情符号及其名称的对象。请注意，表情符号必须用引号括起来。在 App 函数上方创建此数组：

      import React from 'react';
import './App.css';
const displayEmojiName = event => alert(event.target.id);
const emojis = [
{
emoji: "😀",
name: "grinning face"
},
{
emoji: "🎉",
name: "party popper"
},
{
emoji: "💃",
name: "woman dancing"
}
];
function App() {
...
}
export default App;

      现在你已经有了数据，可以对其进行遍历了。要在 JSX 中使用 JavaScript，需要用花括号 {} 将其括起来。这类似于向属性添加函数。.

      要创建 React 组件，你需要将数据转换为 JSX 元素。为此，你需要映射数据并返回一个 JSX 元素。编写代码时需要注意以下几点。.

      首先，必须用容器来表示一组项目。 <div> 其次，每个元素都需要一个名为“键”（key）的特殊属性。键应该是 React 用来跟踪元素的唯一数据，以便它知道何时更新组件。键仅供内部使用，因此会在编译后的 HTML 中移除。在使用循环时，您应该添加一个简单的字符串作为键。.

      以下是一个简单的示例，展示了一个名称列表。 <div> 它绘制了：

      ...
const names = [
"Atul Gawande",
"Stan Sakai",
"Barry Lopez"
];
return(
<div>
{names.map(name => <div key={name}>{name}</div>)}
</div>
)
...

      生成的HTML代码如下所示：

      ...
<div>
<div>Atul Gawande</div>
<div>Stan Sakai</div>
<div>Barry Lopez</div>
</div>
...

      表情符号列表的转换方式类似。. <ul> 它将是一个容器。您将映射数据和一个 <li> 返回表情符号的短名称键。对标签中的数据进行编码。 <button> 和 <span> 您需要将信息替换为戒指信息。.

      在文本编辑器中，添加以下内容：

      import React from 'react';
import './App.css';
const displayEmojiName = event => alert(event.target.id);
const emojis = [
{
emoji: '😀',
name: "test grinning face"
},
{
emoji: '🎉',
name: "party popper"
},
{
emoji: '💃',
name: "woman dancing"
}
];
function App() {
const greeting = "greeting";
return(
<div className="container">
<h1 id={greeting}>Hello, World</h1>
<p>I am writing JSX</p>
<ul>
{
emojis.map(emoji => (
<li key={emoji.name}>
<button
onClick={displayEmojiName}
>
<span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>
</button>
</li>
))
}
</ul>
</div>
)
}
export default App;

      在代码中，点击标签中的表情符号数组。 <ul> 地图和一 <li> 返回。在任何情况下 <li> 您使用了表情符号名称作为主键。按钮的功能将与往常相同。在元素中 <span>将 aria-label 和 id 替换为名称。标记内容 <span> 应该是一个表情符号。.

      保存文件。窗口刷新后，您将看到数据。请注意，生成的 HTML 代码中不包含密钥。.

      将 JSX 与标准 JavaScript 结合使用，可以让你拥有许多动态生成内容的工具，而且你可以使用任何你想要的标准 JavaScript 代码。在这一步中，你用数组和循环替换了硬编码的 JSX，从而动态生成 HTML。在下一步中，你将使用简写方式有条件地显示信息。.

      步骤 5 – 有条件地显示短路元件

      在此步骤中，您将使用短代码来有条件地显示 HTML 元素。这样，您就可以创建能够根据附加信息隐藏或显示 HTML 的组件，从而使您的组件能够灵活地处理各种不同的情况。.

      有时，您需要某个组件在某些情况下显示信息，而在其他情况下则不显示。例如，您可能只想在满足特定条件时才向用户显示警告消息，或者您可能只想向管理员显示一些您不希望普通用户看到的帐户信息。.

      为此，您可以使用短路语句。也就是说，您使用一个条件，如果第一个条件为真，则返回第二个条件的信息。.

      举个例子。如果你只想在用户登录后才显示按钮，你需要用花括号将该元素括起来，并添加一个条件。.

      {isLoggedIn && <button>Log Out</button>}

      在这个例子中，你使用了 `&&` 运算符，如果所有条件都为真，则返回最后一个值。否则，它返回 `false`，告诉 React 不要返回任何额外的标记。如果 `isLoggedIn` 为真，React 会显示按钮。如果 `isLoggedIn` 为假，则不会显示按钮。.

      要尝试此功能，请添加以下高亮显示的代码行：

      import React from 'react';
import './App.css';
...
function App() {
const greeting = "greeting";
const displayAction = false;
return(
<div className="container">
<h1 id={greeting}>Hello, World</h1>
{displayAction && <p>I am writing JSX</p>}
<ul>
...
</ul>
</div>
)
}
export default App;

      在文本编辑器中，你创建了一个名为 displayAction 的变量，并将其值设为 false。然后是标签 <p> 你用花括号将 displayAction 括了起来。在花括号的开头，你添加了 &amp;&amp; 来创建一个条件。.

      保存文件后，你会发现该元素在浏览器中消失了。更重要的是，它也不会出现在生成的 HTML 代码中。这与使用 CSS 隐藏元素不同，它最终根本不会出现在标记中。.

      目前 displayAction 的值是硬编码的，但您也可以将该值存储为状态，或者将其作为基值从父组件传递。.

      在本步骤中，您学习了如何根据条件显示元素。这使您可以创建可根据其他信息进行自定义的组件。.

      结果

      至此，您已经使用 JSX 创建了一个自定义应用程序。您学习了如何向组件添加类似 HTML 的元素，如何为这些元素添加样式，如何传递属性以创建语义化且易于访问的标记，以及如何将事件附加到组件。然后，您将 JavaScript 与 JSX 结合使用，以减少重复代码并根据条件显示和隐藏元素。.

      这是构建未来组件的基础。通过结合使用 JavaScript 和 HTML，您可以构建灵活的动态组件，使您的应用程序能够不断发展和变化。.

在本文中：
,,,
文章作者：
跟随
发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

上一篇文章
下一篇文章
您可能也喜欢