在反应中添加列表项 - JavaScript

在 React 中，我们可以使用 map() 方法来渲染一个数组中的元素。如果你希望将一个数组渲染成一个列表，我们需要为每个元素添加一个 <li>（列表项） 标签。下面是一个简单的 React 组件，它将一个数组渲染成一个无序列表：

function List(props) {
  const items = props.items.map((item) =>
    <li key={item.toString()}>
      {item}
    </li>
  );
  return (
    <ul>
      {items}
    </ul>
  );
}

在这个组件中，我们使用 map() 方法将 props.items 数组中的每个元素包裹在一个 <li> 标签中，并将结果存储在 items 数组中。在渲染时，我们将 items 数组渲染成一个 <ul>（无序列表）。

注意：我们必须为每个列表项添加一个唯一的 key 属性，这有助于 React 追踪元素的身份，以便在需要重新渲染组件时进行优化。

让我们看看这个组件是如何使用的：

<List items={['item 1', 'item 2', 'item 3']} />

这将呈现以下 HTML：

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

希望这个简短的教程有助于你在你的 React 项目中创建漂亮的列表！