React zapobiega ucieczce znaku amp (&) w atrybutach

Question

Mam komponent z atrybutem data-icon. Wartością tego atrybutu powinna być na przykład &#xf00f, aby css mógł renderować je poprzez content: attr(data-icon);.

Jednak cokolwiek próbuję: React ciągle ucieka do &. Nawet jeśli podam prawidłowy kod Unicode \u0026#xf00f.

Czy jest jakiś sposób, aby zatrzymać React przed naruszeniem tej wartości? Poza niebezpiecznym ustawianiem wewnętrznego html, ponieważ nie chcę dodawać kolejnego opakowania.

Komponent

define([ 'react', 'util' ], function(React, Util) 
{ 
    return React.createClass(
    { 
     render: function() 
     { 
      //var amp = '\u0026', 
      var amp = String.fromCharCode(38),  
      // Util.icons[x] returns a String, such as "f00f" 
      code = amp + '#x' + Util.icons[this.props.name] + ';'; 

      return (
       <i data-icon={code}> 
        {this.props.children ? <span>{this.props.children}</span> : null} 
       </i> 
      ); 
     } 
    }); 
}); 

Wykorzystanie

<Widget.Icon name="add" /> 

Wyjście

<i data-icon="&amp;#xf0fb;" data-reactid=".170lse36465.7.0"></i> 

Answer 1

Cóż, zdałem sobie sprawę, że dla mojego Szczególnym przypadkiem użycie mogę po prostu uciec z:

<i data-icon={String.fromCharCode("f00f")} /> 

https://github.com/facebook/react/issues/3769