如何使用JSX创建React元素

作为 Write for DOnations 计划的一部分，作者选择了 Creative Commons 来接受捐赠。

介绍

在本教程中，您将学习如何使用 JSX 来描述元素。 JSX 是一种抽象，允许您在 JavaScript 代码中编写类似 HTML 的语法，并使您能够构建看起来像标准 HTML 标记的 React 组件。 JSX 是 React 元素的模板语言，因此是 React 将呈现到应用程序中的任何标记的基础。

由于 JSX 使您还可以在标记中编写 JavaScript，因此您将能够利用 JavaScript 函数和方法，包括 array 映射和条件的短路评估。

作为本教程的一部分，您将直接在标记中捕获按钮上的单击事件，并在语法与标准 HTML 不完全匹配时捕获实例，例如 CSS 类。在本教程结束时，您将拥有一个工作应用程序，该应用程序使用各种 JSX 功能来显示具有内置单击侦听器的元素列表。这是 React 应用程序中的一种常见模式，您将在学习框架的过程中经常使用它。您还可以将标准 HTML 元素与 JavaScript 混合使用，以了解 React 如何让您能够创建小的、可重用的代码片段。

先决条件

您将需要一个运行 Node.js 的开发环境；本教程在 Node.js 版本 10.19.0 和 npm 版本 6.13.4 上进行了测试。要在 macOS 或 Ubuntu 18.04 上安装它，请按照如何在 macOS 上安装 Node.js 和创建本地开发环境中的步骤或的 使用 PPA 部分安装如何在 Ubuntu 18.04 上安装 Node.js。
您将需要能够使用 Create React App 创建应用程序。你可以在 How To Set Up a React Project with Create React App 找到使用 Create React App 安装应用程序的说明。
您还需要 JavaScript 的基本知识，您可以在如何在 JavaScript 中找到这些知识，以及 HTML 和 CSS 的基本知识。 HTML 和 CSS 的一个很好的资源是 Mozilla 开发者网络。

第 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 的强大功能。

在这一步中，您将学习将基本的类似 HTML 的语法添加到现有的 React 元素。首先，您需要将标准 HTML 元素添加到 JavaScript 函数中，然后在浏览器中查看编译后的代码。您还将对元素进行分组，以便 React 可以用最少的标记编译它们，留下干净的 HTML 输出。

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

npx create-react-app jsx-tutorial

项目完成后，进入目录：

cd jsx-tutorial

在新的终端选项卡或窗口中，使用 Create React App 启动脚本启动项目。浏览器将自动刷新更改，因此请让此脚本在您工作的整个过程中运行：

npm start

您将获得一个正在运行的本地服务器。如果项目没有在浏览器窗口中打开，您可以在 http://localhost:3000/ 中找到它。如果您从远程服务器运行它，地址将是 http://your_IP_address:3000。

您的浏览器将加载包含在 Create React App 中的 React 应用程序。

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

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

nano src/App.js

你会看到一个像这样的文件：

jsx 教程/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 语句之后的所有内容。将其更改为返回 null。最终代码将如下所示：

jsx 教程/src/App.js

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
...

这就是 linter 告诉你你没有使用导入的 React 代码。当您将 import React from 'react' 行添加到代码中时，您正在导入将 JSX 转换为 React 代码的 JavaScript 代码。如果没有 JSX，就不需要导入。

让我们通过添加少量 JSX 来改变它。首先将 null 替换为 Hello, World 示例：

jsx 教程/src/App.js

import React from 'react';
import './App.css';

function App() {
  return <h1>Hello, World</h1>;
}

export default App;

保存文件。如果您在服务器运行的情况下查看终端，警告消息将消失。如果您访问浏览器，您将看到消息为 h1 元素。

接下来，在 <h1> 标记下方，添加包含字符串 I am writing JSX 的段落标记。代码将如下所示：

jsx 教程/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;

由于 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 并添加空标签：

jsx 教程/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 提供单个元素。

注意： 你也可以用 div 代替空标签来包装代码，只要代码返回一个元素。在此示例中，空标签的优点是不会向已解析的输出添加额外的标记。

保存代码并退出文件。您的浏览器将刷新并显示带有段落元素的更新页面。此外，当代码被转换时，空标签被剥离：

您现在已经向组件添加了一些基本的 JSX，并了解了所有 JSX 需要如何嵌套在单个组件中。在下一步中，您将为组件添加一些样式。

第 2 步 — 为具有属性的元素添加样式

在这一步中，您将对组件中的元素进行样式设置，以了解 HTML 属性如何与 JSX 一起使用。 React 中有许多样式选项。其中一些涉及用 Javascript 编写 CSS，另一些则使用预处理器。在本教程中，您将使用导入的 CSS 和 CSS 类。

现在您已经有了代码，是时候添加一些样式了。在文本编辑器中打开 App.css：

nano src/App.css

由于您是从新的 JSX 开始的，因此当前的 CSS 指的是不再存在的元素。由于您不需要 CSS，因此可以将其删除。

删除代码后，您将拥有一个空文件。

接下来，您将添加一些样式以使文本居中。在 src/App.css 中，添加以下代码：

jsx 教程/src/App.css

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

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

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

nano src/App.js

CSS 代码已通过 import './App.css' 行导入。这意味着 webpack 将拉入代码以制作最终样式表，但要将 CSS 应用于您的元素，您需要添加类。

首先，在您的文本编辑器中，将空标签 <> 更改为 <div>。

jsx 教程/src/App.js

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 的变量，因为该字已被保留。

保留字之一是 class。 React 通过稍微改变它来绕过这个保留字。您将添加属性 className，而不是添加属性 class。通常，如果某个属性未按预期工作，请尝试添加驼峰式版本。另一个稍有不同的属性是用于标签的 for 属性。还有少数其他案例，但幸运的是列表相当短。

注意： 在 React 中，属性通常被称为 props。道具是您可以传递给其他自定义组件的数据片段。它们看起来与属性相同，只是它们不匹配任何 HTML 规范。在本教程中，我们将它们称为属性，因为它们主要用作标准 HTML 属性。这会将它们与行为不像 HTML 属性的 props 区分开来，这将在本系列的后面部分介绍。

现在您知道 class 属性在 React 中是如何使用的，您可以更新代码以包含样式。在您的文本编辑器中，将 className="container" 添加到开始的 div 标记中：

jsx 教程/src/App.js

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，而无需进行任何更改。例如，返回您的文本编辑器并将 greeting 的 id 添加到 <h1> 元素。它看起来像标准的 HTML：

jsx 教程/src/App.js

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 看起来像标准标记，但 JSX 的优势在于，即使它看起来像 HTML，它也具有 JavaScript 的强大功能。这意味着您可以分配变量并在属性中引用它们。要引用一个属性，用花括号-{}-而不是引号括起来。

在您的文本编辑器中，添加以下突出显示的行以引用属性：

jsx 教程/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>
    </div>
  )
}

export default App;

在此代码中，您在 return 语句上方创建了一个名为 greeting 的变量，其值为 "greeting"，然后在您的 id 属性中引用了该变量<h1> 标签。

保存并退出文件。该页面将是相同的，但带有 id 标签。

到目前为止，您已经单独使用了一些元素，但是您也可以使用 JSX 添加许多 HTML 元素并将它们嵌套以创建复杂的页面。

为了证明这一点，您将创建一个包含表情符号列表的页面。这些表情符号将被 <button> 元素包裹。当您单击表情符号时，您将获得他们的 CLDR 短名称。

首先，您需要向页面添加更多元素。在文本编辑器中打开 src/App.js。在此步骤中保持打开状态。

nano src/App.js

首先，通过添加以下突出显示的行来添加表情符号列表：

jsx 教程/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;

在这里，您创建了一个 <ul> 标签来保存表情符号列表。每个表情符号都在一个单独的 <li> 元素中，并被 <button> 元素包围。在下一步中，您将向此按钮添加一个事件。

您还用 <span> 标签包围了表情符号，该标签具有更多属性。每个 span 都将 role 属性设置为 img 角色。这将向可访问性软件发出信号，表明该元素像图像一样。此外，每个 <span> 还有一个 aria-label 和一个带有表情符号名称的 id 属性。 aria-label 将通过屏幕阅读器告诉访问者显示的内容。在下一步写入事件时，您将使用 id。

当您以这种方式编写代码时，您正在使用语义元素，这将有助于保持页面可访问且易于屏幕阅读器解析。

保存并退出文件。您的浏览器将刷新，您将看到：

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

nano src/App.css

添加以下突出显示的代码以删除按钮的默认背景和边框，同时增加字体大小：

jsx 教程/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;
}

在此代码中，您使用了 font-size、border 和其他参数来调整按钮的外观并更改字体。您还删除了列表样式并将 display: flex 添加到 <ul> 元素以使其水平。

保存并关闭 CSS 文件。您的浏览器将刷新，您将看到：

您现在已经使用了几个看起来像常规 HTML 的 JSX 元素。您已经添加了类、id 和 aria 标记，并将数据作为字符串和变量处理。但是 React 也使用属性来定义你的元素应该如何响应用户事件。在下一步中，您将开始通过向按钮添加事件来使页面具有交互性。

第 3 步 — 向元素添加事件

在此步骤中，您将使用特殊属性将事件添加到元素并捕获按钮元素上的单击事件。您将学习如何从事件中捕获信息以调度另一个操作或使用文件范围内的其他信息。

现在您已经有了一个包含信息的基本页面，是时候向其中添加一些事件了。您可以将许多事件处理程序添加到 HTML 元素中。 React 让你可以访问所有这些。由于您的 JavaScript 代码与您的标记相结合，因此您可以快速添加事件，同时保持代码井井有条。

首先，添加 onclick 事件处理程序。这使您可以将一些 JavaScript 代码直接添加到元素中，而不是附加事件侦听器：

jsx 教程/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
            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 的函数，该函数接受事件并使用 id 调用 alert() 函数。然后将函数传递给每个 onClick 属性：

jsx 教程/src/App.js

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

添加一个数组，该数组将包含具有表情符号和表情符号名称的 objects。请注意，表情符号需要用引号括起来。在 App 函数上方创建此数组：

jsx 教程/src/App.js

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 的特殊属性。 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> 标签中的硬编码数据。

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

jsx 教程/src/App.js

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> 标记中的 emojis 数组并返回 <li>。在每个 <li> 中，您使用表情符号名称作为 key 道具。该按钮将具有与正常功能相同的功能。在 <span> 元素中，将 aria-label 和 id 替换为 name。 <span> 标签的内容应该是表情符号。

保存文件。您的窗口将刷新，您将看到数据。请注意，生成的 HTML 中不存在密钥。

将 JSX 与标准 JavaScript 相结合为您提供了许多动态创建内容的工具，并且您可以使用任何您想要的标准 JavaScript。在这一步中，您将硬编码的 JSX 替换为一个数组和一个循环来动态创建 HTML。在下一步中，您将使用短路有条件地显示信息。

第 5 步 - 有条件地显示短路元件

在此步骤中，您将使用短路来有条件地显示某些 HTML 元素。这将允许您创建可以基于附加信息隐藏或显示 HTML 的组件，从而使您的组件能够灵活地处理多种情况。

有时您需要一个组件在某些情况下而不是其他情况下显示信息。例如，您可能只想在某些情况下为用户显示警报消息，或者您可能希望为管理员显示一些您不希望普通用户看到的帐户信息。

为此，您将使用短路。这意味着您将使用条件，如果第一部分是真实的，它将返回第二部分中的信息。

这是一个例子。如果您只想在用户登录时显示按钮，您可以用花括号将元素括起来并在之前添加条件。

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

在此示例中，您使用的是 && 运算符，如果一切都是真的，它将返回最后一个值。否则，它返回 false，这将告诉 React 不返回额外的标记。如果 isLoggedIn 为真，React 将显示按钮。如果 isLoggedIn 为假，则不会显示按钮。

要尝试这一点，请添加以下突出显示的行：

jsx 教程/src/App.js

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 && 来创建条件。

保存文件，您将看到该元素在浏览器中消失。至关重要的是，它也不会出现在生成的 HTML 中。这与使用 CSS 隐藏元素不同。它在最终标记中根本不存在。

现在 displayAction 的值是硬编码的，但您也可以将该值存储为状态或将其作为来自父组件的道具传递。

在此步骤中，您学习了如何有条件地显示元素。这使您能够创建基于其他信息可定制的组件。

结论

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

这是您制作未来组件所需的基础。使用 JavaScript 和 HTML 的组合，您可以构建灵活的动态组件，并允许您的应用程序增长和更改。

如果您想了解有关 React 的更多信息，请查看我们的 React 主题页面。