显示变量中的 fontello 字符

Question

我已经从 fontello 创建了一种有效的字体。 我正在尝试根据作为参数传递的字符串在反应组件中显示字符。

直接声明时有效的相同字符串或数字在作为变量传递时不再被理解。

    let toto = ""
    let tata = 2049 ; // 2049 decimal = 801 hex
    return   <>
        <i className="demo-icon">&#xe801;</i>  {/* works */}
        <i className="demo-icon">'&#xe801;'</i> {/* works */}
        <i className="demo-icon">"&#xe801;"</i> {/* works */}
        <i className="demo-icon">{toto}</i>     {/* does not work, shows  "&#xe801;" */}
        <i className="demo-icon">{tata}</i>     {/* does not works, shows  "2049" */}
    </> 

Answer 1

您遇到的问题源于React对变量和特殊字符的处理。当您直接输入字符串时，React 会将其解释为 HTML 并正确呈现该字符。但是，当您给出一个变量时，React 会将其视为常规字符串并忽略特殊字符。您可以使用危险的SetInnerHTML 属性告诉 React 将字符串解释为 HTML。

 <i className="demo-icon" dangerouslySetInnerHTML={{ __html: toto }} />