react antd message多条数据展示样式

news2024/11/17 19:44:43
最终效果:

在这里插入图片描述
前言:
平时我们经常用到message来做一些错误提示,最常见的就是单行提示。如下图:
在这里插入图片描述
实现代码:

message.error('This is an error message')

多行动态message实现

参考文献:antd message
链接地址:https://ant-design.antgroup.com/components/message-cn
message的参数

我们可以用config的形式来配置message在这里插入图片描述
className

其中className就可以实现自定义样式,为什么要用message的className?

因为message作为弹出层,我们无法通过在某个页面用global来控制antd的属性,他的作用域在全局,我们用className给message加了类名,就可以锁定当前的message做一些调整。

content
content的内容可以是string类型也可以是 ReactNode,这样我们就可以用通过ReactNode返回多行文本内容。

duration
我们知道message是三秒后就自动关闭,在我们开发过程中需要调试样式可以把duration设置为0,永不关闭来使用

页面代码

messageError.tsx
注意:errInfos可以通过接口返回或者动态的值来返回,实现动态提示效果。

import { Button, message } from 'antd';
import styles from './index.less';

interface IType {
  id: number;
  name: string;
}

const MessageError = () => {
  const errInfos: IType[] = [
    { id: 1, name: '打啥' },
    { id: 2, name: '池昌旭' },
    { id: 3, name: '朴有天' },
  ];
  const handleError = (errList: IType[]) => {
    if (errList.length === 0) {
      message.success('成功');
    } else {
      const errDom = (
        <div className={styles.err_div}>
          {errList.map((v: any) => {
            const { id, name } = v;
            return (
              <div className={styles.err_des} key={id}>
                旅客{id}<span>{name} XXXXXXXXXXXXXXX</span>
              </div>
            );
          })}
        </div>
      );
      message.error({
        content: errDom,
        className: styles.err_con,
        duration: 0,
      });
    }
  };
  return <Button onClick={() => handleError(errInfos)}>点击</Button>;
};

export default MessageError;

index.less
样式很关键,如果不通过global修改antd默认属性,展示样式如下:
在这里插入图片描述

.err_div{
  display: inline-block;
}
.err_des {
  text-align: left;
}
.err_con {
  :global {
    .ant-message-error {
      display: flex;
      align-items: flex-start;
    }
    .ant-message-error .anticon {
      margin-top: 2px;
  }
  }
}

最终效果
在这里插入图片描述

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

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

相关文章

SOLIDWORKS 2024新产品发布会暨SOLIDWORKS 创新日活动-硕迪科技

“达索系统SOLIDWORKS 2024新产品发布会暨SOLIDWORKS创新日” 线下发布会即将登场&#xff01;硕迪科技与达索系统携手为您奉上一场“云享未来&#xff0c;智协未来”的创新年度盛会&#xff0c;欢迎莅临&#xff01; SOLIDWORKS 2024 以更加强大的姿态亮相&#xff0c;帮助您…

Python小技巧:bytes与str的区别

嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! python更多源码/资料/解答/教程等 点击此处跳转文末名片免费获取 bytes实例包含的是原始数据&#xff0c;即8位的无符号值(通常按照ASCII编码标准来显示)。 a bh\x65llo print(list(a)) print(a) >>> [104, 101, …

【1107】有关环境的学习记录。。。

有关python环境&#xff01;&#xff01;&#xff01; 1、python解释器就是 python 3.7.2 之类的。 VSCode 是代码编辑器。 下图的每一个都是可选的python环境&#xff0c;Python 3.8.3&#xff08;‘base’&#xff09;是下载在电脑上的python环境&#xff08;下载miniConda时…

深入解析 Redis 分布式锁原理

一、实现原理 1.1 基本原理 JDK 原生的锁可以让不同线程之间以互斥的方式来访问共享资源&#xff0c;但如果想要在不同进程之间以互斥的方式来访问共享资源&#xff0c;JDK 原生的锁就无能为力了。此时可以使用 Redis 来实现分布式锁。 Redis 实现分布式锁的核心命令如下&am…

chrome v3开发插件实现所有网站允许跨域

场景&#xff1a; chrome 插件 升级到v3后&#xff0c;原来修改请求响应都变成异步&#xff0c;即无法同步拦截来修改请求响应。 在v3中也不支持修改请求响应内容。 问题&#xff1a;如何在chrome v3中允许其他网站跨域呢。 方式一&#xff1a;禁用chrome跨域&#xff0c;禁…

JPA编程中自定义SQL语句使用case/when语句实现分页查询和分类排序的示例

一、需求背景 查询我发起的以及被邀请的工单列表&#xff0c;要求分页查询&#xff0c;排序的具体要求是&#xff1a; 先按状态排序&#xff0c;未处理的排前面再按处理人排序&#xff0c;被邀请的排前面&#xff0c;自己发起的排后面最后按修改时间倒序 处理状态包括三种&a…

云尘靶场-Tr0ll-vulhub

直接fscan扫描 发现这里有一个ftp 我们等等看 首先去nmap扫描端口 nmap -A -p- 172.25.0.13 --unprivileged 这里使用wsl ftp ssh 和80 然后我们继续继续目录扫描 dirb 出来没什么用处 所以我们继续去看 流量包 流量包分析 首先看tcp ->分析->追踪流 这里是f…

什么是Kubernetes RBAC?为什么需要它?

目录 什么是Kubernetes RBAC? 如何启用Kubernetes RBAC 1.服务帐户 2.角色和集群角色 3.角色绑定和集群角色绑定 Kubernetes RBAC的好处 1.适当的授权 2.职责分离 3.100%遵守法规 Kubernetes RBAC的缺点 企业软件开发工具 什么是Kubernetes RBAC? 当组织开始走上…

英国最值得参观的十大博物馆介绍

目前&#xff0c;到英国从事访问交流及博士后研究的学者越来越多&#xff0c;而英国一向以厚重的历史人文以及精彩绝伦的艺术著称&#xff0c;在这样一个有着浓厚历史沉淀的国家&#xff0c;自然最不缺的就是博物馆了&#xff0c;在学习工作的闲暇&#xff0c;可以去参观体验一…

C语言求解有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少?

完整代码&#xff1a; /*有一对兔子&#xff0c;从出生后第3个月起每个月都生一对兔子&#xff0c;小兔子长到第三个月后每个月 又生一对兔子&#xff0c;假如兔子都不死&#xff0c;问每个月的兔子总数为多少&#xff1f; 程序分析&#xff1a; 兔子的规律为数列1,1,2,3,5,8…

AI智能公文写作助手“文山会海“

公文写作痛点 没思路&#xff0c;公文写作无从下手公文类型繁多&#xff0c;一时难以全面掌握公文内容组织难度大&#xff0c;不易清晰、有逻辑的进行表达时间紧任务急&#xff0c;往往需要在有限的时间内完成大量写作工作反复修改优化&#xff0c;需满足更多新要求&#xff0…

WordPress 企业一号wp主题企业建站模板V1.2.2开心版

模板简介&#xff1a; 企业一号是一款由主题巴巴团队原创设计开发的WordPress企业主题。这款主题配备了强大的可视化、模块化的页面设计功能&#xff08;页面构建器&#xff09;&#xff0c;让您通过添加不同的设计模块和配置模块选项就可以设计出各种丰富多彩的页面。主题还集…

信号发送与处理-上

问题 按下 Ctrl C 后&#xff0c;命令行中的前台进程会被终止。为什么&#xff1f;&#xff1f;&#xff1f; 什么是信号&#xff1f; 信号是一种 "软件中断"&#xff0c;用来处理异步事件 内核发送信号到某个进程&#xff0c;通知进程事件的发送事件可能来自硬件…

③【操作表数据】MySQL添加数据、修改数据、删除数据

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ MySQL添加数据、修改数据、删除数据 &#x1f…

渗透测试学习day2

文章目录 连接靶机靶机&#xff1a;Fawn 解题过程Task 1Task 2Task 3Task 4Task 5Task 6Task 7Task 8Task 9Task 10Task 11Task 12 总结 连接靶机 详细过程可参考day1 靶机&#xff1a;Fawn 难度&#xff1a;very easy &#xff08;ftp服务的靶机&#xff09; 解题过程 T…

单链表(1)

前面的顺序表是顺序存储&#xff08;类似于数组&#xff09;&#xff0c;下面的链表是链式存储。物理是否相邻就看其存储地址&#xff08;格子&#xff09;是否相邻挨在一起。逻辑是否相邻看其前驱后继。 例如上面3个数据 如果存在顺序表中&#xff0c;那就是100的后继是200,2…

网络测试工具—— iperf2 安卓APK 下载 及简单使用

网络测试工具—— iperf2 安卓APK 下载 及简单使用 前言一、iperf2是什么&#xff1f;二、使用步骤附上help中命令截图翻译总结 前言 项目上有一款安卓车机加载局域网图片加载非常慢&#xff0c;所以需要测试一个安卓车机设备的带宽&#xff0c;经过调研后使用到了iperf2。 一…

【Android】Debug时禁用主线程ANR限制

ANR全称Application Not Response&#xff0c;指主线程超过5s无响应&#xff0c;应用会自动退出 由于这个线程&#xff0c;如果我们给主线程加了断点&#xff0c;就会触发ANR&#xff0c;导致调试时应用退出 这样调试起来会非常麻烦&#xff0c;其实对于Debug应用&#xff0c…

解决springboot整合websocket、redis、openfeign,redisTemplate,openfeign的类无法注入的问题

在部分业务中&#xff0c;我们需要使用长连接&#xff0c;我们可以使用http长连接或者websocket&#xff0c;在springboot作为后端的框架中&#xff0c; 可以借用的技术是&#xff08;netty&#xff0c;websocket&#xff09; 版本如下 软件版本号jdk21springboot 3.1.5 spri…

企业微信开启接收消息+验证URL有效性

企业微信开启接收消息验证URL有效性 &#x1f4d4; 千寻简笔记介绍 千寻简笔记已开源&#xff0c;Gitee与GitHub搜索chihiro-notes&#xff0c;包含笔记源文件.md&#xff0c;以及PDF版本方便阅读&#xff0c;且是用了精美主题&#xff0c;阅读体验更佳&#xff0c;如果文章对…