顯示清單資料

  • 4 分鐘

由於 React 是以 JavaScript 和 XML/HTML 的組合為基礎，因此可以動態產生 HTML，並與 JavaScript 完全整合。

案例

顯示原料清單，包括為任何標示為備妥的項目新增刪除線。 若要這麼做，請為樣式建立新的 css 檔案，然後為您的原料清單建立新的元件。

建立新的樣式

  1. 在 src 中建立名為 IngredientList.css 的新檔案。

  2. 新增下列程式碼至 IngredientList.css：

    .prepared {
    text-decoration: line-through;
}

建立元件

由於您的 HTML 與 JSX 中的 JavaScript 整合，因此您會依賴 JavaScript 處理邏輯和迴圈。 若要顯示陣列中包含的一組項目，您通常會使用 map 函式。 map 旨在根據函式呼叫的結果來建立新的項目陣列。 如果您想要在排序清單中顯示標題清單，請使用 map 和您稍早學到的 { } 語法。

  1. 在 src 內，建立名為 IngredientList.jsx 的新檔案。

  2. 將下列程式碼新增至 檔案：

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

function IngredientList(props) {
    // Create the list items using map
    const ingredientListItems = props.ingredients.map((ingredient, index) => {
        return (
            // Return the desired HTML for each ingredient
            <li key={index} className={ ingredient.prepared ? 'prepared' : '' }>
                { ingredient.name }
            </li>
        );
    });

    // return the HTML for the component
    // ingredientListItems will be rendered as li elements
    return (
        <ul>
            { ingredientListItems }
        </ul>
    );
}

export default IngredientList;

探索程式碼

首先，建立字串陣列，以包含 ingredients 清單。 建議每個原料以清單項目的形式顯示。 使用 map 來執行此任務。

如先前所強調的，map 其運作行為類似於 for each 語句。 它會針對陣列中的每個項目執行一次函數。 若要顯示 li HTML 元素的集合，需要傳回適當的 JSX，其中 {ingredient} 位於 li 中。

更新應用程式以使用 IngredientList

讓我們來顯示您的原料清單！

  1. 開啟 src/App.jsx。

  2. 在讀取 TODO: Import IngredientList 的行之下，新增下列程式碼：

    // TODO: Import IngredientList
import IngredientList from './IngredientList'

  3. 在讀取 TODO: Add IngredientList component 的行之下，新增下列 JavaScript：

    {/* TODO: Add IngredientList component */}
<IngredientList ingredients={recipe.ingredients} />

顯示結果

儲存所有檔案。 瀏覽器會自動更新並顯示最近的更新。 請注意原料清單，其中最後兩個項目顯示為 [已準備]，上面標有刪除線。

Screenshot of list of ingredients.