显示列表数据

  • 4 分钟

由于 React 基于 JSX（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，li 包含 {ingredient}。

更新应用以使用 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.