顯示動態資料

5 分鐘

元件可讓您將應用程式細分為邏輯片段。在本單元中，我們將藉由建立配方標題的元件來探索此功能。我們會建立元件，並將其匯至入 App。也會探索如何動態顯示資料。

顯示動態資料

若要在元件內顯示動態資料，請使用語法 { }，有時也稱為 handlebars。這種語法樣式常用於 HTML 範本化工具中。使用這些 Handlebars 可有效地切換至 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.

繼續

顯示動態資料