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就是一个包含多个

标签的组件。然后我们将listItem用

标签包裹起来并在浏览器呈现：

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

测试代码

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

基于列表的组件

大部分情况，我们希望在一个组件中完成一个列表元素的渲染。将前面的例子稍加修改：

//构建组件 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]; //渲染组件 ReactDOM.render( <NumberList numbers={numbers} />, document.getElementById('root') );

当我们执行这个例子的代码时，会发现在浏览器中输出一个警告：" a key should be provided for list items"。"键值（Key）"在创建列表元素时是一个附加的属性，下一节会详细说明使用它的原因。


原文链接