代码之家 › 专栏 › 技术社区 › Francis

显示变量中的fontello字符

fontello hex fonts reactjs

0

Francis · 技术社区 · 2 年前

我从fontello创建了一个有效的字体。我正试图在react组件中显示一个字符,该字符基于作为参数传递的字符串。

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

    let toto = "&#xe801;"
    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" */}
    </>

1 回复 | 直到 2 年前

1

user24953897 2 年前

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

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