《关于学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
                })
            })
          }

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值