React 列表渲染

news2025/7/9 15:25:17

开发环境:React+ts+antd
你可能经常需要通过 JavaScript 的数组方法 来操作数组中的数据,从而将一个数据集渲染成多个相似的组件。在这篇文章中,你将学会如何在 React 中使用 filter() 筛选需要渲染的组件和使用 map() 把数组转换成组件数组。

1.如何通过 JavaScript 的 map() 方法从数组中生成组件
2. 如何通过 JavaScript 的 filter()筛选需要渲染的组件
3. 何时以及为何使用 React 中的 key

从数组中渲染数据

import React from "react";

const people = [
    {
        id: 0,
        name: '凯瑟琳·约翰逊',
        profession: '数学家',
    },
    {
        id: 1,
        name: '马里奥·莫利纳',
        profession: '化学家',
    },
    {
        id: 2,
        name: '穆罕默德·阿卜杜勒·萨拉姆',
        profession: '物理学家',
    },
    {
        id: 3,
        name: '珀西·莱温·朱利亚',
        profession: '化学家',
    },
    {
        id: 4,
        name: '苏布拉马尼扬·钱德拉塞卡',
        profession: '天体物理学家',
    },
];

const App: React.FC = () => {
    const listItems = people.map(person =>
        <li>{person.name} : {person.profession}</li>
    );
    return <ul>{listItems}</ul>;
}
export default App;

运行结果如下:
在这里插入图片描述

JavaScript 的 filter()筛选需要渲染的组件

现在,假设你只想在屏幕上显示职业是 化学家 的人。那么你可以使用 JavaScript 的 filter() 方法来返回满足条件的项。这个方法会让数组的子项经过 “过滤器”(一个返回值为 true 或 false 的函数)的筛选,最终返回一个只包含满足条件的项的新数组。

import React from "react";

const people = [
    {
        id: 0,
        name: '凯瑟琳·约翰逊',
        profession: '数学家',
    },
    {
        id: 1,
        name: '马里奥·莫利纳',
        profession: '化学家',
    },
    {
        id: 2,
        name: '穆罕默德·阿卜杜勒·萨拉姆',
        profession: '物理学家',
    },
    {
        id: 3,
        name: '珀西·莱温·朱利亚',
        profession: '化学家',
    },
    {
        id: 4,
        name: '苏布拉马尼扬·钱德拉塞卡',
        profession: '天体物理学家',
    },
];

const App: React.FC = () => {
    const chemists = people.filter(person =>
        person.profession === '化学家'
    );
    const listItems = chemists.map(person =>
        <li>{person.name} : {person.profession}</li>
    );
    return <ul>{listItems}</ul>;
}
export default App;

注意

因为箭头函数会隐式地返回位于 => 之后的表达式,所以你可以省略 return 语句。

const listItems = chemists.map(person =>
  <li>...</li> // 隐式地返回!
);

不过,如果你的 => 后面跟了一对花括号 { ,那你必须使用 return 来指定返回值!

const listItems = chemists.map(person => { // 花括号
  return <li>...</li>;
});

箭头函数 => { 后面的部分被称为 “块函数体”,块函数体支持多行代码的写法,但要用 return 语句才能指定返回值。假如你忘了写 return,那这个函数什么都不会返回!

运行结果:
在这里插入图片描述

在这里插入图片描述

此时控制台报错是因为我在li标签处未加上key值,当我加上key值后

<li key={person.id}>{person.name} : {person.profession}</li>

控制台就不会报错了

用 key 保持列表项的顺序

注意
直接放在 map() 方法里的 JSX 元素一般都需要指定 key 值!

这些 key 会告诉 React,每个组件对应着数组里的哪一项,所以 React 可以把它们匹配起来。这在数组项进行移动(例如排序)、插入或删除等操作时非常重要。一个合适的 key 可以帮助 React 推断发生了什么,从而得以正确地更新 DOM 树。

如何设定 key 值

不同来源的数据往往对应不同的 key 值获取方式:
来自数据库的数据: 如果你的数据是从数据库中获取的,那你可以直接使用数据表中的主键,因为它们天然具有唯一性。
本地产生数据: 如果你数据的产生和保存都在本地(例如笔记软件里的笔记),那么你可以使用一个自增计数器或者一个类似 uuid 的库来生成 key。

key 需要满足的条件
key 值在兄弟节点之间必须是唯一的。 不过不要求全局唯一,在不同的数组中可以使用相同的 key。
key 值不能改变,否则就失去了使用 key 的意义!所以千万不要在渲染时动态地生成 key。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2331377.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[ctfshow web入门] web25

信息收集 要想拿到flag&#xff0c;需要突破两层if。 解题 第一个if 传入r0&#xff0c;拿到mt_rand的值&#xff0c;由于每一次访问都会重新设置种子&#xff0c;所以每一次访问都是一样的随机数。 所以我们的r mt_rand-显示的值 1799250188 r1799250188就可以突破第一…

【数据结构】树的介绍

目录 一、树1.1什么是树&#xff1f;1.2 树的概念与结构1.3树的相关术语1.4 树形结构实际运用场景 二、二叉树2.1 概念与结构2.2 特殊的二叉树2.2.1 满二叉树2.2.2 完全二叉树 个人主页&#xff0c;点击这里~ 数据结构专栏&#xff0c;点击这里~ 一、树 1.1什么是树&#xff1…

Android源码之App启动

目录 App启动概述 App启动过程 App启动过程图 源码概述 跨进程启动 进程内启动 下面以应用桌面Launcher启动App的MainActivity来举例&#xff1a; App启动概述 首先&#xff0c;MainActivity是由Launcher组件来启动的&#xff0c;而Launcher又是通过Activity管理服务Act…

【GESP】C++二级练习 luogu-B3721 [语言月赛202303] Stone Gambling S

GESP二级练习&#xff0c;多层循环分支练习&#xff0c;难度★✮☆☆☆。 题目题解详见&#xff1a;https://www.coderli.com/gesp-2-luogu-b3721/ 【GESP】C二级练习 luogu-B3721 [语言月赛202303] Stone Gambling S | OneCoderGESP二级练习&#xff0c;多层循环分支练习&am…

2. Qt界面文件原理

本节主要介绍ui文件如何与窗口关联&#xff0c;并通过隐式连接方式显示对话框 本文部分ppt、视频截图原链接&#xff1a;[萌马工作室的个人空间-萌马工作室个人主页-哔哩哔哩视频] 1 UI文件如何与窗口关联 1.1 mainwindow.cpp的头文件ui_mainwindow.h 根据编译原理的基本规…

Elastic 的 OpenTelemetry 分发版(EDOT)现已正式发布:开源、可用于生产环境的 OTel

作者&#xff1a;来自 Elastic Miguel Luna 及 Bahubali Shetti Elastic 自豪地宣布正式发布 Elastic OpenTelemetry 分发版&#xff08;Elastic Distributions of OpenTelemetry - EDOT&#xff09;&#xff0c;其中包含 Elastic 自定义版本的 OpenTelemetry Collector 以及多…

docker部署jenkins并成功自动化部署微服务

一、环境版本清单&#xff1a; docker 26.1.4JDK 17.0.28Mysql 8.0.27Redis 6.0.5nacos 2.5.1maven 3.8.8jenkins 2.492.2 二、服务架构&#xff1a;有gateway&#xff0c;archives&#xff0c;system这三个服务 三、部署步骤 四、安装linux 五、在linux上安装redis&#…

【NLP 53、投机采样加速推理】

目录 一、投机采样 二、投机采样改进&#xff1a;美杜莎模型 流程 改进 三、Deepseek的投机采样 流程 Ⅰ、输入文本预处理 Ⅱ、引导模型预测 Ⅲ、候选集筛选&#xff08;可选&#xff09; Ⅳ、主模型验证 Ⅴ、生成输出与循环 骗你的&#xff0c;其实我在意透了 —— 25.4.4 一、…

VScode连接CentOS 7.6虚拟机

本文内容&#xff1a;在Windows上使用VMware运行虚拟机&#xff0c;然后使用VScode连接CentOS 7.6虚拟机。 进入系统前 安装VMware 安装教程参考&#xff1a;VMware安装 下载CentOS 7.6镜像 可以使用国内镜像源&#xff0c;但是一般国内镜像源要么已经不维护CentOS 7.6这个…

高德地图 3D 渲染-区域纹理图添加

引入-初始化地图&#xff08;关键代码&#xff09; // 初始化页面引入高德 webapi -- index.html 文件 <script src https://webapi.amap.com/maps?v2.0&key您申请的key值></script>// 添加地图容器 <div idcontainer ></div>// 地图初始化应该…

搭建hadoop集群模式并运行

3.1 Hadoop的运行模式 先去官方看一看Apache Hadoop 3.3.6 – Hadoop: Setting up a Single Node Cluster. 本地模式&#xff1a;数据直接存放在Linux的磁盘上&#xff0c;测试时偶尔用一下 伪分布式&#xff1a;数据存放在HDFS&#xff0c;公司资金不足的时候用 完全分布式&a…

Qt实现鼠标右键弹出弹窗退出

Qt鼠标右键弹出弹窗退出 1、鼠标右键实现1.1 重写鼠标点击事件1.2 添加头文件1.3 添加定义2、添加菜单2.1添加菜单头文件2.2创建菜单对象2.3 显示菜单 3、添加动作3.1添加动作资源文件3.2 添加头文件3.3 创建退出动作对象3.4菜单添加动作对象 4、在当前鼠标位置显示菜单4.1当前…

Springboot整合Mybatis+Maven+Thymeleaf学生成绩管理系统

前言 该系统为学生成绩管理系统&#xff0c;可以当作学习参考&#xff0c;也可以成为Spirng Boot初学者的学习代码&#xff01; 系统描述 学生成绩管理系统提供了三种角色&#xff1a;学生&#xff0c;老师&#xff0c;网站管理员。主要实现的功能如下&#xff1a; 登录 &a…

C#里第一个WPF程序

WPF程序对界面进行优化,但是比WINFORMS的程序要复杂很多, 并且界面UI基本上不适合拖放,所以需要比较多的时间来布局界面, 产且需要开发人员编写更多的代码。 即使如此,在面对诱人的界面表现, 随着客户对界面的需求提高,还是需要采用这样的方式来实现。 界面的样式采…

PyTorch 生态迎来新成员:SGLang 高效推理引擎解析

SGLang 现已正式融入 PyTorch 生态系统&#xff01;此次集成确保了 SGLang 符合 PyTorch 的技术标准与最佳实践&#xff0c;为开发者提供了一个可靠且社区支持的框架&#xff0c;助力大规模语言模型&#xff08;LLM&#xff09;实现高效且灵活的推理。 如需深入了解 PyTorch…

时序数据库 TDengine Cloud 私有连接实战指南:4步实现数据安全传输与成本优化

小T导读&#xff1a;在物联网和工业互联网场景下&#xff0c;企业对高并发、低延迟的数据处理需求愈发迫切。本文将带你深入了解 TDengineCloud 如何通过全托管服务与私有连接&#xff0c;帮助企业实现更安全、更高效、更低成本的数据采集与传输&#xff0c;从架构解析到实际配…

微服务注册中心选择指南:Eureka vs Consul vs Zookeeper vs Nacos

文章目录 引言微服务注册中心概述什么是服务注册与发现选择注册中心的标准 常见的微服务注册中心1. Eureka1.1 理论基础1.2 特点1.3 示例代码 2. Consul2.1 理论基础2.2 特点2.3 示例代码 3. Zookeeper3.1 理论基础3.2 特点3.3 示例代码 4. Nacos4.1 理论基础4.2 特点4.3 示例代…

厦门未来之音:科技与自然共舞的奇幻篇章

故事背景 故事发生在中国福建厦门&#xff0c;描绘未来城市中科技与传统文化深度融合的奇景。通过六大创新场景展现人与自然、历史与未来的和谐共生&#xff0c;市民在智能设施中感受文化传承的力量。 故事内容 从鼓浪屿的声波音乐栈道到BRT天桥上的空中茶园&#xff0c;从修复…

VS Code-i18n Ally国际化插件

前言 本文借鉴&#xff1a;i18n Ally 插件帮你轻松搞定国际化需求-按模块划分i18n Ally 是一款 VS Code 插件&#xff0c;它能通过可视 - 掘金本来是没有准备将I18n Ally插件单独写一个博客的&#xff0c;但是了解过后&#xff0c;功能强大&#xff0c;使用方便&#xff0c;解决…

在亚马逊云科技上使用n8n快速构建个人AI NEWS助理

前言&#xff1a; N8n 是一个强大的工作流自动化工具&#xff0c;它允许您连接不同的应用程序、服务和系统&#xff0c;以创建自动化工作流程&#xff0c;并且采用了开源MIT协议&#xff0c;可以放心使用&#xff0c;他的官方网站也提供了很多的工作流&#xff0c;大家有兴趣的…