06 【列表 & Key】

06 【列表 & Key】

首先，让我们看下在 Javascript 中如何转化列表。

如下代码，我们使用 map() 函数让数组中的每一项变双倍，然后我们得到了一个新的列表 doubled 并打印出来：

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);console.log(doubled);

代码打印出 [2, 4, 6, 8, 10]。

在 React 中，把数组转化为元素列表的过程是相似的。

1.列表

1.1 渲染多个组件

你可以通过使用 {} 在 JSX 内构建一个元素集合。

下面，我们使用 Javascript 中的 map() 方法来遍历 numbers 数组。将数组中的每个元素变成 <li> 标签，最后我们将得到的数组赋值给 listItems：

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>  <li>{
   number}</li>);

然后，我们可以将整个 listItems 插入到 <ul> 元素中：

<ul>{
   listItems}</ul>

在 CodePen 上尝试

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((numbers) =>
  <li>{
   numbers}</li>
);

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<ul>{
   listItems}</ul>);

这段代码生成了一个 1 到 5 的项目符号列表。

1.2 基础列表组件

通常你需要在一个组件中渲染列表。

我们可以把前面的例子重构成一个组件，这个组件接收 numbers 数组作为参数并输出一个元素列表。

function NumberList(props) {
   
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{
   number}</li>
  );
  return (
    <ul>{
   listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NumberList numbers={
   numbers} />);

当我们运行这段代码，将会看到一个警告 a key should be provided for list items，意思是当你创建一个元素时，必须包括一个特殊的 key 属性。我们将在下一节讨论这是为什么。

让我们来给每个列表元素分配一个 key