将字符串转为html标签-续
https://class.imooc.com/course/qadetail/215448
老师,这个是将图标写死了,而老师在视频中是动态的通过远程数据获取的图标信息,我想了解下得到图标信息如何将字符串转为html标签,如:<MailOutlined />直接写上去是字符串,而不是图标
老师你给我的这个将图标写死了,我自己会这样写,就是图标写死的做法我是会的。所以我希望老师告诉我如果得到远程的数据如:<MailOutlined />,怎么转换为图标
import React, { Component,Fragment } from 'react'; import logo from './logo.png'; import './style.css'; import { Menu } from 'antd'; import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons'; const { SubMenu } = Menu; class App extends React.Component { state = { current: 'mail', }; handleClick = e => { console.log('click ', e); this.setState({ current: e.key, }); }; render() { return ( <Menu onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal"> <Menu.Item key="mail"> <MailOutlined /> One </Menu.Item> <Menu.Item key="app"> <AppstoreOutlined /> Two </Menu.Item> </Menu> ); } } ReactDOM.render(<App />, document.getElementById('container'));
27
收起
正在回答 回答被采纳积分+1
1回答
卡布琦诺
2020-04-20 10:55:39
同学你好,在ant-design4.0中,使用图标需要将type:"<AppstoreOutlined />"传递成 type: “AppstoreOutlined”,再制定一个映射表 map = {AppstoreOutlined: AppstoreOutlined}其中 key 是字符串,value 是组件,然后使用 map[type] 获取到对应的组件。目前阶段不建议使用ant-design4.0,因为后面异步获取的接口老师已经制定好了,接口返回的图标数据是ant-design3.0形式的。所以,建议同学按照课程视频,使用跟老师一样的ant-design3.0版本进行学习。
祝学习愉快!
4.Vue与React高级框架开发
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理,通过ES6基础知识和前端主流高级框架的学习,助你快速构建企业级移动webAPP应用,进入职场的终极battle
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星