显示动态数据

5 分钟

借助组件，可将一个应用程序分解为多个逻辑片段。在本单元中，我们将为食谱标题生成一个组件，以便了解此功能。我们将生成组件，并将其导入 App。我们还将探讨如何动态显示数据。

显示动态数据

若要在组件中显示动态数据，请使用语法 { }，有时人们称之为 handlebar。此类语法相对较常见于 HTML 模板化工具。使用这些 handlebar 时，可有效切换到 JavaScript 模式，并可运行几乎所有有效的 JavaScript。

例如，若要显示当前时间，可以使用以下代码：

<div>{ Date.now() }</div>

创建 RecipeTitle 组件

在本示例中，我们将为食谱标题创建一个组件。我们要将一个 JavaScript 变量用于标题，以演示 React 如何显示动态数据。我们会在未来的单元中介绍如何使用更复杂的数据。

在 src 文件夹中创建一个新文件。将其命名为 RecipeTitle.jsx。

将以下代码添加到 RecipeTitle.jsx：

import React from 'react';

function RecipeTitle() {
    const title = 'Mashed potatoes';
    return (
        <h2>{ title }</h2>
    )
};
export default RecipeTitle;

浏览代码

请注意，我们创建了一个名为 title 的常量。然后，我们使用 handlebar 语法 { }，来告知 React 我们要在 <h2> 元素内显示 title 的值。借助 JSX 的此功能，我们能够将 JavaScript 和 HTML 混合在一起。

使用 RecipeTitle 组件

让我们将 RecipeTitle 添加到 App，以便在应用程序中显示它。

打开 src/App.jsx。
在内容为 import React from 'react'; 的行（应是第 2 行）下面，添加以下代码：
```
import RecipeTitle from './RecipeTitle'
```
在内容为 <h1>Recipe Manager</h1> 的语法下面添加以下代码，以将 RecipeTitle 用作一个 HTML 元素：
```
<RecipeTitle />
```

浏览代码

现在，src/App.jsx 文件的完整内容如下所示：

import React from 'react';
import RecipeTitle from './RecipeTitle'

function App() {
    return (
        <article>
            <h1>Recipe Manager</h1>
            <RecipeTitle />
        </article>
    )
}

export default App;

我们像使用 HTML 一样使用了 <App />，我们也可以通过几乎相同的方式使用 RecipeTitle。此示例说明了创建 React 应用程序的本质：创建并使用组件来生成应用程序。

查看结果

保存所有文件。浏览器应自动刷新并显示已更新的页面。页面顶部应显示标题“Mashed potatoes”。

Screenshot of a webpage that displays a recipe title.

显示动态数据