HTML-Element mit React-Variable zeigt kein ASCII an

Question

Ich habe einen benutzerdefinierten Titel empfangen und in einer JS-Variablen festgelegt. Aber die Ausgabe zeigt den ASCII-Code anstelle des Symbols. Hier ist ein einfaches Beispiel für die Render-Funktion:

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

Und der Ausgang ist

Mein Titel ™

statt

Mein Titel ™

Warum passiert das?

Answer 1

Sie versuchen, HTML aus einer Zeichenfolge einzufügen, auch wenn es kein Tag ist.

Sie haben also zwei einfache Lösungen, um dies zu beheben.

Zuerst kann man dieses Element in einem Tag wickeln und legen Sie sie anschließend:

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

Zweitens Sie dangerouslySetInnerHtml verwenden können, auch wenn es nicht empfohlen wird, weil, na ja, es gefährlich ist.

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

Der Vollständigkeit halber hat @Tom Fenech zwei weitere elegante Lösungen in seiner Antwort gezeigt.

Vollarbeitscode:

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

Wenn Sie ein Symbol ™ in einem String enthalten sein sollen, dann entweder das Zeichen selbst direkt oder beziehen sich auf sie \u2122 mit (die Unicode Codepunkt).

Solange Ihre Dateien gespeichert und in der richtigen Codierung serviert werden, sollten Sie kein Problem mit beiden Ansatz haben.

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>