React変数を含むHTML要素にASCIIが表示されない

Question

カスタム変数が受信され、JS変数に設定されています。しかし、出力にはシンボルの代わりにASCIIコードが表示されます。ここでは、レンダリング機能の簡単な例です：

render() { 
    var title = "My Title™" 
    return <div>{title}</div>; 
} 

は、出力が

マイタイトル™

ではなく

私のタイトルである™

なぜこのようなことが起こっていますか？

Answer 1

タグではなくても、文字列からhtmlを挿入しようとしています。

これを解決するには、2つの簡単な解決策があります。

まずあなたがタグにこの要素をラップし、その後、それを挿入することができます。

var title = ["My Title", <span>&#8482</span>] 

第二に、あなたはよく、それは危険だ、ので、それはお勧めできませんにもかかわらずdangerouslySetInnerHtmlを使用することができます。

return <div dangerouslySetInnerHTML={{__html: title}}></div> 

完全性のために、@Tom Fenechは答えとして2つの優​​雅な解決策を示しました。

全作業コード：

var Example = React.createClass({ 
 
    render: function() { 
 
    var listTitle = ["My Title", <span>&#8482;</span>] 
 
    var dangerousTitle = "My other Title&#8482;"; 
 
    return <div> 
 
     {listTitle}<br/> 
 
     <div dangerouslySetInnerHTML={{__html: dangerousTitle}}></div> 
 
    </div>; 
 
    } 
 
}); 
 

 
ReactDOM.render(
 
    <Example/>, 
 
    document.getElementById('container') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="container"></div>

Answer 2

あなたが文字列で™記号を含めたい場合は、（直接文字自体を使用するか、または\u2122を使用して、それを参照してください。いずれかのUnicodeコードポイント）。

ファイルが保存され、正しいエンコーディングで提供されている限り、どちらの方法でも問題はありません。

function testComponent() { 
 
    return React.DOM.div(null, 
 
     React.DOM.h3(null, "My Title™"), 
 
     React.DOM.h3(null, "My Title\u2122")); 
 
} 
 

 
ReactDOM.render(React.createElement(testComponent), 
 
    document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>