我有一个data-icon
属性的组件。例如,此属性的值应为
,以便css可以通过content: attr( data-icon );
呈现它。
但是,无论我尝试什么:React都会逃避&
。即使我提供了正确的unicode字符\u0026#xf00f
。
有没有办法阻止React搞乱那个值?除了危险地设置内部html,因为我不想添加另一个包装器。
组件
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>
);
}
} );
} );
用法
<Widget.Icon name="add" />
输出
<i data-icon="&#xf0fb;" data-reactid=".170lse36465.7.0"></i>
答案 0 :(得分:14)
嗯,我刚刚意识到,对于我的特定用例,我可以简单地逃脱:
<i data-icon={String.fromCharCode( "f00f" )} />