将字符串转为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'));

迷失的小麦 2020-04-19

源自：项目：React实现新闻网站核心功能 2-3 Ajax获取Header组件数据

收起

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版本进行学习。

祝学习愉快！

收起回答

提问者迷失的小麦 #1

能不能将代码写给我看看，了解一下。使用图标需要将type:"<AppstoreOutlined />"传递成 type: “AppstoreOutlined”，再制定一个映射表 map = {AppstoreOutlined: AppstoreOutlined}其中 key 是字符串，value 是组件，然后使用 map[type] 获取到对应的组件。

2020-04-20 12:38:02