React 状态、事件与动态渲染

列表与组件的键值

首先让我们看看在JavaScript中我们是如何处理一个列表的：

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

例子中使用map方法将每个元素的值*2，最后得到的数组为：[2, 4, 6, 8, 10]。在React中，处理组件数组的方式与之类似。

渲染多个组件

下面的例子，我们使用map()方法来创建组件中的一系列元素：

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

listItem就是一个包含多个<li>标签的组件。然后我们将listItem用<ul>标签包裹起来并在浏览器呈现：

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

测试代码

通过类似的方法，我们可以使用数组来创建一系列元素。

点击查看原文