我有一个带有 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>
最佳答案
好吧,我刚刚意识到,对于我的特定用例,我可以简单地逃避:
<i data-icon={String.fromCharCode( "f00f" )} />
关于javascript - React 不断转义属性中的 amp 字符 (&),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29907127/