Ich möchte in der Lage sein, Text mit HTML-Tags zu übergeben, wie folgt:
<MyComponent text="This is <strong>not</strong> working." />
Aber innerhalb der Rendermethode druckt es MyComponent
beim Ausdrucken this.props.text
buchstäblich alles aus:
This is <strong>not</strong> working.
Gibt es eine Möglichkeit, React dazu zu bringen, HTML zu analysieren und ordnungsgemäß auszugeben?
<MyComponent>This is <strong>not</strong> working</MyComponent>
, anstatt sie als Requisiten zu übergeben. Könnten Sie mehr Kontext zu dem geben, was Sie tatsächlich erreichen wollen?Antworten:
Sie können gemischte Arrays mit Zeichenfolgen und JSX-Elementen verwenden (siehe die Dokumente hier ):
Hier gibt es eine Geige, die zeigt, dass sie funktioniert: http://jsfiddle.net/7s7dee6L/
Als letztes Mittel haben Sie immer die Möglichkeit, unformatiertes HTML einzufügen. Seien Sie jedoch vorsichtig, da dies Sie für einen XSS-Angriff (Cross-Site Scripting) öffnen kann, wenn die Eigenschaftswerte nicht bereinigt werden.
quelle
{text.map( textOrHTML, index) => <span key={index}>{textOrHTML}</span> )}
, indem Sie das Array durchgehen und den Index als Schlüssel in MyComponent hinzufügen . Es ist jedoch so seltsam, dass wir dies zunächst vollständig tun müssen.key="[some unique value]"
das<strong>
Element aufsetzen.<MyComponent text={<>This is <strong>not</strong> working.</>} />
Tatsächlich gibt es dafür mehrere Möglichkeiten.
Sie möchten JSX in Ihren Requisiten verwenden
Sie können einfach {} verwenden, um JSX zu veranlassen, den Parameter zu analysieren. Die einzige Einschränkung ist dieselbe wie für jedes JSX-Element: Es darf nur ein Stammelement zurückgegeben werden.
Der am besten lesbare Weg, dies zu tun, besteht darin, eine Funktion renderMyProp zu erstellen, die JSX-Komponenten zurückgibt (genau wie die Standard-Renderfunktion), und dann einfach myProp = {this.renderMyProp ()} aufzurufen.
Sie möchten nur HTML als Zeichenfolge übergeben
Standardmäßig können Sie in JSX kein unformatiertes HTML aus Zeichenfolgenwerten rendern. Es gibt jedoch eine Möglichkeit, dies zu erreichen:
Dann können Sie es in Ihrer Komponente folgendermaßen verwenden:
Beachten Sie, dass diese Lösung bei Cross-Site-Scripting-Fälschungsangriffen geöffnet werden kann. Beachten Sie auch, dass Sie nur einfaches HTML, kein JSX-Tag, keine JSX-Komponente oder andere ausgefallene Dinge rendern können.
Der Array-Weg
In Reaktion können Sie ein Array von JSX-Elementen übergeben. Das bedeutet:
Ich würde diese Methode nicht empfehlen, weil:
Der Kinderweg
Wenn Sie es der Vollständigkeit halber hinzufügen, aber reagieren, können Sie auch alle Kinder erhalten, die sich in Ihrer Komponente befinden.
Also, wenn ich den folgenden Code nehme:
Dann sind die beiden Divs als this.props.children in SomeComponent verfügbar und können mit der Standardsyntax {} gerendert werden.
Diese Lösung ist perfekt, wenn Sie nur einen HTML-Inhalt an Ihre Komponente übergeben müssen (Stellen Sie sich eine Popin-Komponente vor, die den Inhalt des Popins nur als untergeordnete Elemente verwendet).
Wenn Sie jedoch mehrere Inhalte haben, können Sie keine untergeordneten Inhalte verwenden (oder Sie müssen diese hier zumindest mit einer anderen Lösung kombinieren).
quelle
this.props.children
. Ohne 's' reactjs.org/docs/glossary.html#propschildrenSie können gefährlichSetInnerHTML verwenden
Senden Sie einfach das HTML als normale Zeichenfolge
Und rendern Sie im JSX-Code wie folgt:
Seien Sie vorsichtig, wenn Sie vom Benutzer eingegebene Daten rendern. Sie können Opfer eines XSS-Angriffs werden
Hier ist die Dokumentation: https://facebook.github.io/react/tips/dangerously-set-inner-html.html
quelle
und dann können Sie in Ihrer Komponente Requisitenprüfungen wie folgt durchführen:
Stellen Sie sicher, dass Sie nur einen Requisitentyp auswählen.
quelle
Für mich hat es funktioniert, indem ich HTML-Tags in Requisiten-Kindern übergeben habe
quelle
Ab React v16.02 können Sie ein Fragment verwenden.
Weitere Informationen: https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html
quelle
In einer clientseitigen Reaktionsanwendung gibt es verschiedene Möglichkeiten, eine Requisite als Zeichenfolge mit etwas HTML zu rendern. Einer sicherer als der andere ...
1 - Definiere die Requisite als jsx (meine Präferenz)
• Die einzige Voraussetzung hierfür ist, dass jede Datei, die diese Requisite generiert, React als Abhängigkeit enthält (falls Sie die jsx der Requisite in einer Hilfsdatei usw. generieren).
2 - Stellen Sie das innere HTML gefährlich ein
• Von diesem zweiten Ansatz wird abgeraten. Stellen Sie sich ein Eingabefeld vor, dessen Eingabewert in dieser Komponente als Requisite gerendert wird. Ein Benutzer könnte ein Skript-Tag in die Eingabe eingeben, und die Komponente, die diese Eingabe rendert, würde diesen potenziell schädlichen Code ausführen. Daher kann dieser Ansatz zu Sicherheitslücken bei Cross-Site-Scripting führen. Weitere Informationen finden Sie in den offiziellen React-Dokumenten
quelle
Setzen Sie den Text-Requisitentyp auf einen beliebigen Wert und gehen Sie folgendermaßen vor:
Beispiel
quelle
Sie können es auf zwei Arten tun, die mir bekannt sind.
1-
<MyComponent text={<p>This is <strong>not</strong> working.</p>} />
Und dann mach das
Oder machen Sie es beim zweiten Ansatz so
2-
<MyComponent><p>This is <strong>not</strong> working.</p><MyComponent/>
Und dann mach das
quelle
let vhtml = "<p>Test</p>"
und sie für die Requisite wie diese verwendettext={vhtml}
und sie aus irgendeinem Grund immer noch im Klartext gerendert.@matagus Antwort ist in Ordnung für mich, Hoffnung unter Snippet wird denen geholfen, die eine Variable im Inneren verwenden möchten.
quelle
In meinem Projekt musste ich ein dynamisches HTML-Snippet von einer Variablen übergeben und es innerhalb der Komponente rendern. Also habe ich folgendes gemacht.
Das defaultSelection- Objekt wird aus der
.js
Datei an die Komponente übergebenHtmlSnippet- Komponente
Plunkr Beispiel
Reagieren Sie doc auf gefährlich SetInnerHTML
quelle
Sie können auch eine Funktion für die Komponente verwenden, um jsx an Requisiten weiterzuleiten. mögen:
quelle
Ja, Sie können dies tun, indem Sie ein Mix-Array mit Zeichenfolgen und JSX-Elementen verwenden. Referenz
quelle
Parser von HTML-React-Parser ist eine gute Lösung. Du musst nur
Nennen Sie es mit:
und es funktioniert gut.
quelle
Hinzufügen zur Antwort: Wenn Sie analysieren möchten und sich bereits in JSX befinden, aber ein Objekt mit verschachtelten Eigenschaften haben, können Sie auf elegante Weise Klammern verwenden, um das JSX-Parsen zu erzwingen:
quelle
Diese Frage hat bereits viele Antworten, aber ich hatte etwas falsch gemacht, und ich denke, es lohnt sich, sie zu teilen:
Ich hatte so etwas:
Aber die Massage war länger als das, also habe ich versucht, so etwas zu verwenden:
Es dauerte eine Weile, bis mir klar wurde, dass mir das () im Funktionsaufruf fehlte.
Funktioniert nicht
Arbeiten
Vielleicht hilft dir das, genau wie mir!
quelle
Sie können React-Fragmente erfolgreich für diese Aufgabe verwenden. Abhängig von der von Ihnen verwendeten React-Version können Sie eine kurze Syntax verwenden:
<>
oder das vollständige Tag :<React.Fragment>
. Funktioniert besonders gut, wenn Sie nicht die gesamte Zeichenfolge in HTML-Tags einschließen möchten.quelle
Habe das HTML in componentDidMount mit jQuery append angehängt. Dies sollte das Problem lösen.
quelle