React unterstützt SVG, aber das Hauptproblem ist, dass JSX nicht mit HTML . Sie können nicht einfach irgendeinen alten Blob von HTML oder SVG-Markup kopieren und einfügen und erwarten, dass es in JSX funktioniert, ohne dass etwas unternommen werden muss, um es zu bereinigen. Die Hauptprobleme mit diesem bestimmten SVG-Snippet sind:
JSX lässt keine Kommentare im HTML-Stil zu, wie in Ihrem Beispiel:
%Vor%Sie müssen diese entweder vollständig entfernen oder durch JSX Javascript- ersetzen. Stil Kommentare :
%Vor%JSX unterstützt keine XML-Namespaces. Namespaced-Elemente wie hier funktionieren nicht:
%Vor% Wenn Sie sich die Liste der unterstützten SVG-Tags ansehen , metadata ist nicht enthalten, daher kann dieser Abschnitt direkt entfernt werden, da er die visuelle Ausgabe sowieso nicht beeinflusst. Beachten Sie auch, dass Namenattribute wie xml:space nicht funktionieren:
JSX verwendet das Attribut className anstelle von class . Dies ist notwendig, weil class ein reserviertes Schlüsselwort in Javascript ist, also etwa so:
Sollte dies werden:
%Vor% Das Attribut style in JSX verwendet ein JavaScript-Objekt, kein String-Literal. Also Werte wie folgt:
Muss umgewandelt werden in:
%Vor%Okay, das sind viele Veränderungen! Aber als Belohnung für das Lesen bis hierher kann ich Sie wissen lassen, dass es einen einfachen Weg gibt, die meisten dieser Transformationen zu machen: Seite auf der React-Dokumentationsseite können Sie beliebige HTML-Snippets einfügen und die entsprechende JSX ausgeben. Es scheint, dass dies nicht die Namespace-Probleme behandelt, die ich oben erwähnt habe, aber mit ein paar manuellen Korrekturen können Sie mit einem gültigen JSX enden, der gut anzeigen .