react.js - webfont无法正常显示

问题描述

问 题

webfont的编码使用父组件传递给子组件
子组件里面通过 this.props.itemIcon引用，但是无法正常显示，显示的是字体编码

// 父组件
let data = [
            {
                name: '首页',
                icon: '&#xe652',
                target: ''
            },
            {
                name: '发表',
                icon: '',
                target: ''
            },
            {
                name: '消息',
                icon: '',
                target: ''
            },
            {
                name: '我的',
                icon: '',
                target: ''
            }

        ];
        return (
            <ul className={cn}>
                {
                    data.map((item, index) => <FooterItem itemName={item.name}
                                                          itemIcon={item.icon}
                                                          linkTarget={item.target}
                                                          selected={selected[index]}
                                                          key={index}
                                                          index={index}
                                                          action={this.props.footerClick}
                    />)
                }
            </ul>
            
            
// 子组件
<i className={iconClass}>{this.props.itemIcon}</i>

//我是着把子组件改成下面这样正常显示
<i className={iconClass}>&#xe652;</i> 

{this.props.itemIcon}和文本节点有什么区别呢，怎样才能正常显示呢？求解答

解决方案

已找到方法
后面四位是Unicode编码
因此想使用字符串来传递的话转换为'uxxxx'就可以了。
如 e618 变为 'ue618'

这篇关于react.js - webfont无法正常显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！