如何将item.type的字符串转为html标签

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';

class AppHeader extends Component{
    constructor(props){
        super(props); 
        this.state={
            list:[{
                id:1,
                type:"<MailOutlined />",
                title:"VOA慢速英语"
            },{
                id:2,
                type:"<AppstoreOutlined />",
                title:"VOA慢速英语"
            },{
                id:3,
                type:"<SettingOutlined />",
                title:"VOA慢速英语"
            },{
                id:4,
                type:"<MailOutlined />",
                title:"VOA慢速英语"
            },{
                id:5,
                type:"<AppstoreOutlined />",
                title:"VOA慢速英语"
            },{
                id:6,
                type:"<SettingOutlined />",
                title:"VOA慢速英语"
            }]
        };       
    }
    getMenuItems(){
        return this.state.list.map(item => {
            return (
                <Menu.Item key={item.id} className="app-header-menu">
                    <div dangerouslySetInnerHTML={item.type}></div>
                    VOA慢速英语
                </Menu.Item>
            );
        });
    }
    render(){
        return (
            <Fragment>
                <img src={logo} className="app-header-logo"/>
                <Menu className="app-header-menubox" mode="horizontal">
                    {this.getMenuItems()}
                </Menu>
            </Fragment>
        );
    }
}

export default AppHeader;

迷失的小麦 2020-04-19

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

收起

2回答

卡布琦诺回答被采纳获得+3积分 2020-04-19 16:07:29

同学你好，关于ant-design4.0版本的图标组件使用方法如下：

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 14:24:18

同学你好，不是很理解同学提出“将item.type的字符串转为html标签”的初衷是什么，为什么要这么操作呢？建议详细描述一下，以便于更加准确的定位问题并帮助解答。

祝学习愉快！

收起回答

提问者迷失的小麦 #1

item.type的字符串是<SettingOutlined />，这个需要被转为html标签，否则不显示图标（ant-design4.0版本）

2020-04-19 14:28:22
提问者迷失的小麦 #2

另，3.0版本的说明麻烦发给我看看，我没找到

2020-04-19 14:34:18
卡布琦诺回复提问者迷失的小麦 #3

关于ant-design3.0版本，可以打开https://3x.ant.design/index-cn，在右上角的版本框中选择版本进行查看相应版本的文档（item.type的会在下一条解答）。祝学习愉快！

2020-04-19 15:05:23