React遍历antd库的icon出现的一些问题

最新推荐文章于 2024-04-28 17:14:01 发布
最新推荐文章于 2024-04-28 17:14:01 发布
阅读量872 收藏 2
点赞数
分类专栏： React后台管理项目笔记 文章标签： javascript reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Voiceu/article/details/114794617
版权

用React进行动态遍历导航栏的时候，icon一直出不来，目前版本的antd已经和教学视频中的不一样了，
要遍历的列表数组如下
在这里插入图片描述
我改了icon为字符串的很多种形式，
在这里插入图片描述
都不行
遍历代码如下
在这里插入图片描述

结果如下，无法显示想要的icon

在这里插入图片描述
随后将icon导入list文件中，将列表中的字符串改成对象形式
在这里插入图片描述
这次icon出来了，但是多级列表的title不显示，而且多级列表点进去样式也丢失了
在这里插入图片描述

正常情况下该是这样
在这里插入图片描述
后来发现是忘了写多级列表的title，但是子级列表样式依旧丢失，最终发现是给多级列表添加了Link，本来该菜单栏没有路由的，
在这里插入图片描述

注释掉link就行，
在这里插入图片描述

VoiceU
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react + antd 动态生成 Icon 结点解决方案
Colbru的博客
07-12 2179
由于菜单栏内容较多，创建了一个菜单栏的数组，但是直接使用icon的话会直接显示文字。 页面上会显示的是文字，是错误的展示(如下图） 数组创建如下： 解决方案：使用React.createElement 创建 import * as Icon from '@ant-design/icons'; //引入antd-icon import * as Icon from '@ant-design/icons //创建节点的方法 iconBC(name){ console.log(n
react+ts仿antd icon库
lin_fightin的博客
03-20 500
icon库 从上古时代的雪碧图，到近代的font-icon，到现代的svg（开个玩笑）,越来越多的开发人员选择了svg,因为他们即取即用，并且不会出现项font-icon很多不知名的Bug。 这个icon库是以font-awesome为基础包装成自己的icon组件库。他山之石可以攻玉嘛 先来安装三个库 cnpm i --save @fortawesome/fontawesome-svg-core cnpm i --save @fortawesome/free-solid-svg-icons（免费的库，也有要
uni-icons遍历循环所有内置可用图标
最新发布
weixin_44294359的博客
04-28 193
uni-icons遍历循环所有内置可用图标
React + Antd 实现 icon 选择
ooooooooooos的博客
11-06 836
React 实现选择 Antd icon
react中动态渲染antd的icon
CHENC0518的博客
02-20 321
【代码】react中动态渲染antd的icon。
react调用antd4.X自定义图标 icon | 阿里巴巴矢量图标
this_zq的博客
05-07 465
1 先贴图 2 看官网代码 https://ant.design/components/icon-cn/#components-icon-demo-custom 使用 iconfont.cn，使用多个和单个是异曲同工之处。那里的scriptUrl是生成的一个远程链接，我们在react里面调用它即可。 3 看这篇博客 https://blog.csdn.net/weixin_44021270/article/details/107377658 4 解决阿里巴巴矢量图标自定义更改后无法引用问题 当我
react+antd搭建后台管理框架
05-20
react+antd搭建前端管理框架（***支持响应式***），主要模块分为：菜单、选项卡、面包屑；通过路由监听，实现三个模块之间的联动（同时监听浏览器）；状态采用react-redux进行集中管理。目前只包含前端代码，未与...
React+antd后台管理系统模板
12-01
基于React+antd写了一个后台管理模板。主要是熟悉antd组件和React，页面主要还是展示页面,比较简单不涉及后台交互的系统模板Demo
webpack+react+antd脚手架优化的方法
08-27
本篇文章主要介绍了webpack+react+antd脚手架优化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-admin：React + AntD后台管理系统解决方案
02-05
react-后台管理系统 欢迎使用后台管理系统解决方案本项目是针对（后台人员）或（扩展人员）或快速构建后台管理系统而创建项目过老。 最近更新 升级所有模块到最新,近期会陆续更新 依赖模块 项目是用create-react-...
react实现antd线上主题动态切换功能
10-16
主要介绍了react实现antd线上主题动态切换功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
react+antd中使用iconfont symbol模式
ch071714301的专栏
07-29 963
阿里妈妈iconfont，使用symbol 新建组件iconfont 具体页面中引入组件： importIconFontfrom'./../../components/icon-font'; 使用组件： <IconFonttype="iconadd"style={{fontSize:'20px',color:'#666'}}/> ...
react ant icon的简单使用
琳琳的博客
08-03 1986
上面这行代码就是在页面引入了ant的icon StarOutlined,在页面显示的是一个空心的星星。3.在需要的位置使用这个icon。
十九、React UI框架Antd(Ant Design)的使用——及react Antd的使用 button组件 Icon组件 Layout组件 DatePicker日期组件
*
12-02 5763
一、Antd(Ant Design)的使用：引入全部Css样式 1.1 antd官网： https://ant.design/docs/react/introduce-cn 1.2 React中使用Antd 1、在项目根目录安装antd【每个项目都安装一次】： npm install antd --save / yarn add antd / cnpm install...
react调用antd4.X自定义图标 icon（深入，解决阿里巴巴矢量图标自定义更改后无法引用问题）
weixin_43207103的博客
09-02 1836
1 先贴图 2 看官网代码 https://ant.design/components/icon-cn/#components-icon-demo-custom 使用 iconfont.cn，使用多个和单个是异曲同工之处。那里的scriptUrl是生成的一个远程链接，我们在react里面调用它即可。 3 看这篇博客 https://blog.csdn.net/weixin_44021270/article/details/107377658 4 解决阿里巴巴矢量图标自定义更改后无法引用问题 当我
antd气泡卡片Popover结合Icon实现小问号tips提示
莉兹Liz的博客
10-15 3285
import React, { Comporment } from 'react'; import { Popover } from 'antd'; import { QuestionCircleOutlined } from '@ant-design/icons'; <Popover content={<div style={{ width: '117px', height: 'auto', fontSize: '12px', lineHeight: '17px',
前端项目实战144-ant design table进行数据遍历
qq_41632427的博客
10-27 411
前端
Ant Design中如何遍历渲染图标
ae_pppppp的博客
02-16 474
ant中如何使用图标
基于React+antd的后台管理模板（可预览）
热门推荐
张致豪
08-05 9万+
自己利用业余时间，基于React+antd写了一个后台管理模板。主要是熟悉antd组件和React，页面主要还是展示页面，不涉及后台交互。 特点： 我用
react 遍历数组
07-28
在 React 中遍历数组可以使用 `map` 方法。下面是一个简单的示例： ```jsx const MyComponent = () => { const myArray = [1, 2, 3, 4, 5]; return ( <div> {myArray.map((item) => ( <p key={item}>{item}</p> ))} </div> ); }; ``` 在上面的示例中，我们定义了一个名为 `myArray` 的数组。然后使用 `map` 方法遍历数组中的每个元素，并返回一个包含 `<p>` 标签的新数组。请注意，我们给每个 `<p>` 标签设置了一个唯一的 `key` 属性，这是为了帮助 React 识别每个元素的唯一性。 通过在组件中使用 `{}` 包裹 `map` 方法，我们可以在 JSX 中渲染遍历后的数组元素。 希望这个示例能帮助到你！如果你还有其他问题，请随时问我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值