React 列表

列表用于以有序格式显示数据，主要用于在网站上显示菜单。在 React 中，列表的创建方式与我们在 JavaScript 中创建列表的方式类似。让我们看看如何转换 JavaScript 中的列表。

map() 函数用于遍历列表。在下面的示例中，map() 函数接受一个数字数组并将其值乘以 5。我们将 map() 返回的新数组分配给变量 multiplyNums 并将其记录下来。

示例

输出

上面的 JavaScript 代码将在控制台中记录输出。代码的输出如下所示。

[5, 10, 15, 20, 25]

现在，让我们看看如何在 React 中创建一个列表。为此，我们将使用 map() 函数来遍历列表元素，对于更新，我们将它们放在 花括号 {} 中。最后，我们将数组元素分配给 listItems。现在，将这个新列表包含在 <ul> </ul> 元素中并将其呈现到 DOM 中。

示例

输出

在组件内呈现列表

在前面的示例中，我们直接将列表呈现到 DOM。但将列表呈现在 React 中不是一个好习惯。在 React 中，我们已经看到一切都构建为单独的组件。因此，我们需要在组件内呈现列表。我们可以在以下代码中理解它。

示例

输出