我遇到的问题:
在学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
})
})
}