将字符串转为html标签-续

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


正在回答 回答被采纳积分+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版本进行学习。

祝学习愉快!

  • 提问者 迷失的小麦 #1
    能不能将代码写给我看看,了解一下。 使用图标需要将type:"<AppstoreOutlined />"传递成 type: “AppstoreOutlined”,再制定一个映射表 map = {AppstoreOutlined: AppstoreOutlined}其中 key 是字符串,value 是组件,然后使用 map[type] 获取到对应的组件。
    2020-04-20 12:38:02
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师