webfont无法正常显示

炸鸡腿
  • 77

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}和文本节点有什么区别呢,怎样才能正常显示呢?求解答

回复
阅读 2.2k
2 个回答

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

把icon改成jsx传进入<span>&hhh</span>

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏