Ist dies also die einzige Möglichkeit, rohes HTML mit Reactjs zu rendern?
// http://facebook.github.io/react/docs/tutorial.html
// tutorial7.js
var converter = new Showdown.converter();
var Comment = React.createClass({
render: function() {
var rawMarkup = converter.makeHtml(this.props.children.toString());
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
</div>
);
}
});
Ich weiß, dass es einige coole Möglichkeiten gibt, Dinge mit JSX zu markieren, aber ich bin hauptsächlich daran interessiert, rohes HTML (mit allen Klassen, Inline-Stilen usw.) rendern zu können. So etwas Kompliziertes:
<!-- http://getbootstrap.com/components/#dropdowns-example -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
Ich möchte nicht alles in JSX neu schreiben müssen.
Vielleicht denke ich darüber falsch nach. Bitte korrigieren Sie mich.
javascript
reactjs
Vinhboy
quelle
quelle
Antworten:
Sie können das
html-to-react
npm-Modul nutzen.Hinweis: Ich bin der Autor des Moduls und habe es erst vor einigen Stunden veröffentlicht. Bitte melden Sie Fehler oder Usability-Probleme.
quelle
Es gibt jetzt sicherere Methoden zum Rendern von HTML. Ich habe dies in einer früheren Antwort hier behandelt . Sie haben 4 Optionen, die zuletzt verwendet werden
dangerouslySetInnerHTML
.Methoden zum Rendern von HTML
Am einfachsten - Verwenden Sie Unicode, speichern Sie die Datei als UTF-8 und setzen Sie sie
charset
auf UTF-8.<div>{'First · Second'}</div>
Sicherer - Verwenden Sie die Unicode-Nummer für die Entität in einer Javascript-Zeichenfolge.
<div>{'First \u00b7 Second'}</div>
oder
<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>
Oder ein gemischtes Array mit Zeichenfolgen und JSX-Elementen.
<div>{['First ', <span>·</span>, ' Second']}</div>
Letzter Ausweg - Fügen Sie rohes HTML mit ein
dangerouslySetInnerHTML
.<div dangerouslySetInnerHTML={{__html: 'First · Second'}} />
quelle
dangerouslySetInnerHTML
Ich frage mich, was andere Attribute außer __html erhaltenIch habe dies in schnellen und schmutzigen Situationen verwendet:
quelle
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onload="alert('test');">
?Ich habe diese reine Komponente ausprobiert:
Eigenschaften
className
Requisite (einfacher zu stylen)\n
zu<br />
(das möchten Sie oft tun)<RawHTML>{myHTML}</RawHTML>
Ich habe die Komponente in einem Gist bei Github platziert: RawHTML: ReactJS reine Komponente zum Rendern von HTML
quelle
quelle
gefährlichSetInnerHTML ist Reacts Ersatz für die Verwendung von innerHTML im Browser-DOM. Im Allgemeinen ist das Festlegen von HTML aus Code riskant, da es leicht ist, Ihre Benutzer versehentlich einem XSS-Angriff (Cross-Site Scripting) auszusetzen.
Es ist besser / sicherer, Ihren Roh-HTML-Code (z. B. DOMPurify) zu bereinigen, bevor Sie ihn über in das DOM einfügen
dangerouslySetInnerHTML
.DOMPurify - ein DOM- reiner , superschneller, überaus toleranter XSS-Desinfektionsdienst für HTML, MathML und SVG. DOMPurify arbeitet mit einem sicheren Standard, bietet jedoch viel Konfigurierbarkeit und Hooks.
Beispiel :
quelle
Ich habe diese Bibliothek namens Parser verwendet . Es funktionierte für das, was ich brauchte.
quelle
dangerouslySetInnerHTML
sollte nicht verwendet werden, es sei denn, dies ist unbedingt erforderlich. Nach der Dokumentation, „Dies vor allem für die mit String - Manipulation Bibliotheken DOM zusammenarbeiten“ . Wenn Sie es verwenden, geben Sie die Vorteile der DOM-Verwaltung von React auf.In Ihrem Fall ist die Konvertierung in eine gültige JSX-Syntax ziemlich einfach. Ändern Sie einfach die
class
Attribute inclassName
. Wie in den obigen Kommentaren erwähnt, können Sie auch die ReactBootstrap- Bibliothek verwenden, die Bootstrap-Elemente in React-Komponenten kapselt.quelle
Hier ist eine etwas weniger einfühlsame Version der zuvor veröffentlichten RawHTML-Funktion. Es lässt Sie:
<br />
'sRawHTML></RawHTML>
)Hier ist die Komponente:
Verwendung:
Ausgabe:
Es wird weiter brechen:
quelle
Ich musste einen Link mit dem onLoad-Attribut in meinem Kopf verwenden, wo div nicht erlaubt ist, was mir erhebliche Schmerzen verursachte. Meine aktuelle Problemumgehung besteht darin, das ursprüngliche Skript-Tag zu schließen, das zu tun, was ich tun muss, und dann das Skript-Tag zu öffnen (um vom Original geschlossen zu werden). Hoffe, dies könnte jemandem helfen, der absolut keine andere Wahl hat:
quelle