7 Reactjs 列表和建

川长思鸟来 2023-02-27 08:08 21阅读 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 条评论，21人围观）

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

相关阅读

相关 ReactJS入门

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

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

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

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

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

相关 reactjs useEffect和useLayoutEffect有什么区别

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

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

相关 reactJs 基础

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

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

相关 7 Reactjs 列表和建

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

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

相关 3 Reactjs 组件和属性

从定义上来说，组件就像JavaScript的函数。组件可以接收任意输入(称为”props”)，并返回 React 元素，用以描述屏幕显示内容。函数式组件和类组件

墨蓝/ 2023年02月27日 08:08/ 0 赞/ 1 阅读

相关 reactJs入门

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

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

相关 REHL7和CentOS7 mailx 邮件搭建

linux 下使用 mailx 邮件 -------------------- 邮件常常是Linux下监控报警手段之一。Linux下的mailx命令可以方便，快速的完成

梦里梦外;/ 2022年05月12日 08:36/ 0 赞/ 41 阅读

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

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

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

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

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

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