将字符串转为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 星