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

显示变量中的fontello字符

  •  0
  • Francis  · 技术社区  · 2 年前

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

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

        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" */}
        </> 
    
    1 回复  |  直到 2 年前
        1
  •  1
  •   user24953897    2 年前

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

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