如何使用 JSX 创建 React 元素

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

介绍

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

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

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

先决条件

第 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,一种特殊的标记语言,它通过 JavaScript 的强大功能使 React 组件具有 HTML 的感觉。

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

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

  • npx create-react-app jsx-tutorial

项目完成后,切换到目录:

  • cd jsx-tutorial

在新的终端选项卡或窗口中,使用Create React App startscript启动项目浏览器将自动刷新更改,因此请在您工作的整个时间运行此脚本:

  • 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 语句之后的行和所有内容。将其更改为 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元素。

显示“Hello, World”的浏览器屏幕

接下来,在<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只要代码返回一个元素,您也可以使用 a而不是空标签来包装代码在这个例子中,空标签的优点是不会向解析的输出添加额外的标记。

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

显示标记的浏览器和显示没有空标签的标记的开发工具

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

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

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

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

  • nano src/App.css

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

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

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

jsx-tutorial/src/App.css
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

在此代码块中,您创建了一个名为CSS 类选择器,.container并使用它来使用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;

在此代码,您更换空tags- <>-附div标签。空标签对于在不添加任何额外标签的情况下对代码进行分组很有用,但在这里您需要使用 adiv因为空标签不接受任何HTML 属性

接下来,您需要添加类名。这是 JSX 开始与 HTML 不同的地方。如果你想给一个普通的 HTML 元素添加一个类,你可以这样做:

<div class="container">

但由于 JSX 是 JavaScript,它有一些限制。限制之一是 JavaScript 具有保留关键字这意味着您不能在任何 JavaScript 代码中使用某些词。例如,您不能调用变量,null因为该词已被保留。

保留字之一是classReact 通过稍微改变它来绕过这个保留字。class您将添加属性而不是添加属性className通常,如果某个属性没有按预期工作,请尝试添加驼峰式大小写版本。另一个稍有不同的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;

保存文件。当您这样做时,页面将重新加载并且内容将居中。

在浏览器中居中的 html 元素.

className属性在 React 中是唯一的。您可以将大多数 HTML 属性添加到 JSX 中而无需任何更改。作为一个例子,回到你的文本编辑器和添加idgreeting,以你的<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标签。

在开发者工具中突出显示带有 id 标签的页面

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

为了演示这一点,您将创建一个包含表情符号列表的页面。这些表情符号将被一个<button>元素包裹当你点击表情符号时,你会得到他们的CLDR Short Name

首先,您需要向页面添加更多元素。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都有roleimg角色设置属性这将向可访问性软件发出信号,表明该元素的作用类似于图像此外,每个<span>还有一个aria-label和一个id带有表情符号名称属性。aria-label所显示的内容会告诉屏幕阅读器的访问者。您将id在下一步编写事件时使用

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

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

带有表情符号作为列表的浏览器

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

  • nano src/App.css

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

jsx-tutorial/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-sizeborder和其他参数来调整按钮的外观并更改字体。您还删除了列表样式并添加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,因此您使用了 camelCased onclick,这意味着您将其添加为onClick. onClick属性使用匿名函数来检索有关单击的项目的信息。

您添加了一个匿名箭头函数,该函数将从单击的按钮获取事件,并且该事件将具有一个目标,即<span>元素。您需要的信息在id属性中,您可以使用event.target.id. 您可以使用该alert()功能触发警报

保存文件。在您的浏览器中,单击其中一个表情符号,您将收到带有该名称的警报。

派对波普尔警报

您可以通过声明一次函数并将其传递给每个onClick操作来减少重复由于该函数不依赖于输入和输出以外的任何东西,因此您可以在主组件函数之外声明它。换句话说,函数不需要访问组件的作用域。将它们分开的好处是你的组件函数稍微短一些,如果你愿意,你可以稍后将函数移到一个单独的文件中。

在您的文本编辑器中,创建一个名为的函数,该函数displayEmojiName接受事件并alert()使用 id调用该函数。然后将函数传递给每个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

添加将包含一个数组对象有表情符号和表情符号的名字。请注意,表情符号需要用引号括起来。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>其次,每个项目都需要一个名为 的特殊属性keykey需求是唯一的一块阵营可以用它来保持元素的轨道,因此它可以知道什么时候数据的更新组件密钥将从编译的 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;

在代码中,您映射标记中emojis数组<ul>并返回了一个<li>. 在每个中,<li>您都使用表情符号名称作为key道具。该按钮将具有与正常相同的功能。<span>元素中,将aria-label替换idname<span>标签的内容应该是表情符号。

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

带有开发人员工具的浏览器显示更新后的 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是硬编码的,但您也可以将该值存储为状态或将其作为来自父组件的 prop 传递

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

结论

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

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

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

觉得文章有用?

点个广告表达一下你的爱意吧 !😁