《关于学react的时候发现数据过老图标显示不出来并尝试解决这件事》

本文介绍了在React项目中遇到Ant Design图标库更新问题时的解决方案。通过在state中创建新数组来存放新版本图标,并利用axios获取数据,再通过数据循环替换原有图标,实现了兼容新旧版本的功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我遇到的问题:
在学react的时候(看视频),因为antd的图标写法更新了,导致视频上的icon不能使用
在这里插入图片描述
在这里插入图片描述

如图所示,新版的icon使用了驼峰命名法,并且作为一个组件的形式进行输入

我所使用的解决办法:

  • 在state中新成立一个数组,用来放置即将要用的图标
import { UsergroupDeleteOutlined, IdcardOutlined, DingdingOutlined, GoogleOutlined, WechatOutlined, DribbbleOutlined } from '@ant-design/icons';
constructor(props) {
        super(props);
        this.state = {
            list:[],
            newlist: [
                <UsergroupDeleteOutlined />,
                <IdcardOutlined />,
                <DingdingOutlined />,
                <GoogleOutlined />,
                <WechatOutlined />,
                <DribbbleOutlined />,
            ]
        }
    }
  • 拿到数据后将数据保存到一个常量中(Data),通过数据循环将数组中的新值循环到list中,替换掉旧值
  • item可以获取数据的内容,index可以获取数据的索引,通过索引即可实现图标的改变
componentDidMount(){
axios.get('...')
            .then((res) => {
                const Data = res.data.data
                Data.map((item, index) => {
                    item.icon = this.state.newlist[index]
                    console.log(item.icon, index);
                })
                this.setState({
                    list: res.data.data
                })
            })
          }

在这里插入图片描述
在这里插入图片描述

### 解决 Iconfont 图标 Symbol 形式显示的方法 当遇到 iconfont 图标以 symbol 形式无法正常显示的情况时,可以尝试以下几个方面来排查解决问题。 #### 1. 检查网络请求路径 确保 `iconfont.js` 文件能够被正确加载。如果该文件未能成功下载或存在跨域问题,则可能导致图标无法渲染。可以通过浏览器开发者工具中的 "Network" 面板查看具体的加载情况[^1]。 #### 2. 确认 SVG Spritesheet 是否已注入页面 对于采用 symbol 方法引入的图标来说,必须先将整个 svg spritesheet 插入到 DOM 中才能正常使用。通常情况下,这一步是由 `iconfont.js` 脚本自动完成的。但如果脚本执行失败或者文档结构特殊(比如有 iframe),则可能需要手动添加此操作: ```html <svg style="display:none;"> <!-- 这里放置从 iconfont 下载下来的 symbols --> </svg> ``` #### 3. 使用正确的语法调用图标 在 HTML 文档中引用具体图标的语法规则是固定的,如下所示: ```html <svg class="icon"> <use xlink:href="#icon-name"></use> <!-- 替换为实际的 ID 名字 --> </svg> ``` 请注意这里的 `href` 属性前缀应为 `#`, 且后面跟的是对应图标的唯一标识符(ID),而是 URL 地址[^2]。 #### 4. 处理缓存问题 有时候即使解决了上述所有潜在原因之后仍然看到效果,那可能是由于浏览器端残留的历史数据干扰所致。此时妨清除一下浏览记录或是强制刷新(F5)几次试试看。 #### 5. 排除冲突因素 确认项目内其他资源(如样式表、JavaScript 库等)会影响到 iconfont 的表现形式。特别是某些第三方框架可能会覆盖默认行为,造成预期之外的结果。例如,在 Vue 或 React 组件化开发环境中,组件生命周期钩子函数的位置也会影响最终呈现的效果[^3]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值