Html-react-parser: Wie gehe ich mit !wichtig in Stilattributen um?

Erstellt am 18. Feb. 2021  ·  8Kommentare  ·  Quelle: remarkablemark/html-react-parser

Ich habe die unglückliche Situation, dass ich manchmal HTML-Tags von einem CMS bekomme, die Inline-Stile mit !important enthalten. Ich muss diese analysieren und in einer React-App rendern.

Da kann ich nichts machen und alle Styles mit denen !important angehängt ist, werden von React aussortiert.
Gibt es eine Möglichkeit, html-react-parser zu verwenden, um diese Stile beizubehalten, damit sie im Körper bleiben?
Sollte dies nicht der richtige Ort sein, um diesbezüglich nachzufragen, können Sie dieses Problem in diesem Fall gerne schließen.

Vielen Dank!

question

Alle 8 Kommentare

@linkurzweg Vielleicht html-react-parser . Siehe Geige . Seien Sie sich nur der XSS-Schwachstelle bewusst, wenn Sie gefährlichSetInnerHTML verwenden .

@remarkablemark Ah, ich habe nicht einmal an gefährlichSetInnerHTML gedacht!
In meinem Fall kein wirkliches Risiko für XSS, also sollte das in Ordnung sein.

Das Problem ist, dass ich immer noch alles über html-react-parser ausführen muss, da der Body Elemente enthalten kann, die ich durch eine React-Komponente ersetzen muss. Nur wenn das Element ein style-Attribut hat, kann ich es so rendern, wie es ist.
Gibt es eine Möglichkeit, den domNode beim Parsen wieder in eine Zeichenfolge zu konvertieren?

Vielen Dank!

@linkurzweg Sie können Ihren domNode in domToReact() und es wird als React-Element gerendert. Siehe Ersetzungsbeispiele .

@remarkablemark Nochmals vielen Dank! Ich weiß das, aber ich sehe nicht, wie das in meinem Fall helfen würde?
Ich müsste den domNode immer noch auf einen String zurückbekommen, den ich mit gefährlichSetInnerHTML verwenden könnte, oder bekomme ich nichts?

@linkurzweg Ich folge deinem Anwendungsfall nicht. Können Sie ein Beispiel mit CodeSandbox , JSFiddle oder Repl.it bereitstellen ?

@remarkablemark siehe Geige hier: https://jsfiddle.net/9bezs1rt/.
Es ist also so: Ich bekomme einen riesigen String mit dem gesamten HTML-Code, der auf irgendeine Weise geparst werden muss (kann Skript-Tags, Iframes, Social-Media-Einbettungen usw. enthalten). Ich muss durch alle dom-Knoten iterieren und viele verschiedene Fälle behandeln.

Wenn an den dom-Knoten einige Inline-Stile angehängt sind, kann ich davon ausgehen, dass ich ihn nicht durch eine React-Komponente ersetzen muss und ihn nur durchreichen möchte, einschließlich Stilen, die !important haben. Und die gehen leider verloren.

@linkurzweg Vielen Dank für das Erstellen der Geige. Der Grund, warum die Stile nicht korrekt gerendert werden, liegt darin, dass Inline-Stile nicht !important benötigen.

Nachdem ich !important , habe ich den roten Rand angezeigt. Siehe aktualisierte Geige .

@remarkablemark Natürlich, dumm von mir! Es kann einige andere Stil-Tags mit !important innerhalb des HTML-Strings geben (es ist alles sehr unordentlich), die mit den Inline-Stilen kollidieren könnten. Aber ich kann dort auch das !wichtig entfernen, also sollte es in Ordnung sein. :D Vielen Dank für das Anschauen und Ihre Hilfe!

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen