7 Reactjs 列表和建

川长思鸟来 2023-02-27 08:08 11阅读 0赞

给定下面的代码，我们使用 [map()][map] 函数使 numbers 数组中的元素值翻倍。我们将 map()返回的新数组分配给变量 doubled，并且打印这个它：

const numbers = \[1, 2, 3, 4, 5\];

const doubled = numbers.map((number) => number \* 2);

console.log(doubled);

这段代码在控制台中打印为 \[2, 4, 6, 8, 10\]。

### **多组件渲染** ###

下面，我们用 JavaScript 的 [map()][map] 函数将 numbers 数组循环处理。对于每一项，我们返回一个 <li> 元素。最终，我们将结果元素数组分配给 listItems：

const numbers = \[1, 2, 3, 4, 5\];

const listItems = numbers.map((number) =>

<li>\{number\}</li>

);

把整个 listItems 数组包含到一个 <ul> 元素，并渲染到 DOM：

ReactDOM.render(

<ul>\{listItems\}</ul>,

document.getElementById('root')

);

# #

## **键(Keys)** ##

键(Keys) 帮助 React 标识哪个项被修改、添加或者移除了。数组中的每一个元素都应该有一个唯一不变的键(Keys)来标识：

挑选 key 最好的方式是使用一个在它的同辈元素中不重复的标识字符串。多数情况你可以使用数据中的 IDs 作为 keys：

const todoItems = todos.map((todo) =>

<li key=\{todo.id\}>

\{todo.text\}

</li>

);

当要渲染的列表项中没有稳定的 IDs 时，你可以使用数据项的索引值作为 key 的最后选择：

const todoItems = todos.map((todo, index) =>

// Only do this if items have no stable IDs

<li key=\{index\}>

\{todo.text\}

</li>

);

### **使用 keys 提取组件** ###

keys 只在数组的上下文中存在意义。

例如，如果你提取 一个 ListItem 组件，应该把 key 放置在数组处理的 <ListItem /> 元素中，不能放在 ListItem 组件自身中的 <li> 根元素上。

function ListItem(props) \{

// 正确！这里不需要指定 key ：

return <li>\{props.value\}</li>;

\}

function NumberList(props) \{

const numbers = props.numbers;

const listItems = numbers.map((number) =>

// 正确！key 应该在这里被指定

<ListItem key=\{number.toString()\}

value=\{number\} />

);

return (

<ul>

\{listItems\}

</ul>

);

\}

const numbers = \[1, 2, 3, 4, 5\];

ReactDOM.render(

<NumberList numbers=\{numbers\} />,

document.getElementById('root')

);

## ##

### **在 JSX 中嵌入 map()** ###

function NumberList(props) \{

const numbers = props.numbers;

return (

<ul>

\{numbers.map((number) =>

<ListItem key=\{number.toString()\}

value=\{number\} />

)\}

</ul>

);

\}

[map]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关 ReactJS入门

目录一：前端开发的演变二：ReactJS简介三：搭建环境四：React快速入门 -------------------- 一：前端开发的演变到目前

淡淡的烟草味﹌/ 2024年03月30日 12:28/ 0 赞/ 93 阅读

相关 reactjs大列表大表格渲染组件：react-virtualized

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K

约定不等于承诺〃/ 2023年10月01日 16:59/ 0 赞/ 12 阅读

相关 reactjs useEffect和useLayoutEffect有什么区别

![在这里插入图片描述][ef2ffba41bc24a3d94eab604ef2630e0.png_pic_center] [ef2ffba41bc24a3d94eab60

ゞ浴缸里的玫瑰/ 2023年09月28日 15:32/ 0 赞/ 74 阅读

相关 reactJs 基础

react不是一个完整的mvc,mvvm框架。 react跟web components 不冲突背景原理：基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每

不念不忘少年蓝@/ 2023年08月17日 16:20/ 0 赞/ 158 阅读

相关 7 Reactjs 列表和建

给定下面的代码，我们使用 [map()][map] 函数使 numbers 数组中的元素值翻倍。我们将 map()返回的新数组分配给变量 doubled，并且打印这个它： c

川长思鸟来/ 2023年02月27日 08:08/ 0 赞/ 12 阅读

相关 ReactJs实战感悟

写这篇博文之前，不免先自我介绍一下，作为一个在编码一线搬砖多年，涉猎过C、C++、Java、C\、Javascript等多种语言，从前台到后台，从工程到理论，从Coder到Ma

系统管理员/ 2022年09月21日 13:26/ 0 赞/ 212 阅读

相关 reactJs入门

本文中的react是老版本的，对于新版本只需要改两个地方： <!DOCTYPE html> <html> <head> <me

淩亂°似流年/ 2022年07月16日 03:14/ 0 赞/ 310 阅读

相关数据结构和算法-7-单向循环列表

前面一篇介绍了单链表，这个单链表是基础，这篇我们来看看单链表的变种，单向循环链表，和前面唯一的区别就是列表最后一个节点指向头节点，形成一个环形。 1.单向循环列表单链表的

雨点打透心脏的1/2处/ 2022年01月15日 00:23/ 0 赞/ 183 阅读

相关 ReactJs 注意点

注意点：1.在react创建之初，使用的是React.createClass方法来创建组件类，这种方式下，通过定义组件类的一个getInitialState方法来获取初始值，但

红太狼/ 2021年10月01日 03:24/ 0 赞/ 474 阅读

相关基于Apache服务在centos7上搭建文件列表

参考文献： [https://www.cnblogs.com/snake553/p/8856729.html][https_www.cnblogs.com_snake553_

柔光的暖阳◎/ 2021年10月01日 00:40/ 0 赞/ 307 阅读