web-dev-qa-db-ja.com

React属性のアンプ文字（＆）をエスケープし続けます

_data-icon_属性を持つコンポーネントがあります。この属性の値は、たとえば_&#xf00f_である必要があります。これにより、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="&amp;#xf0fb;" data-reactid=".170lse36465.7.0"></i>
_
javascriptcssescapingreactjsreact-jsx
12
Taig

さて、私はちょうど私の特定のユースケースのために私が簡単に逃げることができることに気づきました：

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

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

16
Taig