Konvertierung eines DOM-Elements in Virtual-DOM in Widgets

Entwickler
1

Ich habe derzeit ein DOM-Element, das das Ergebnis eines benutzerdefinierten KaTeX-Renderings ist.

Es wird wie folgt generiert:

var dom_element = document.createElement("p")
dom_element.innerHTML = "some text that contain latex"
renderMathInElement(dom_element)

Zu diesem Zeitpunkt enthält dom_element das HTML, das ich rendern möchte. Und ich gebe es wie folgt zurück:

html() {
 return h(some other component ...... , h("div", dom_element))
}

Da h einen VNode erwartet, gibt dies einen Fehler. Ich versuche, stattdessen das innere HTML zu übergeben:

html() {
 return h(some other component ...... , h("div", dom_element.innerHTML))
}

Dies rendert die Tags innerhalb von dom_element.innerHTML als reinen Text und nicht als HTML.

Gibt es dafür eine Lösung?

2

Ein Widget ist hierfür mit ziemlicher Sicherheit nicht das richtige Werkzeug.

Ein Widget sollte keine anderen Informationen abrufen, als die, die ihm explizit über Argumente übergeben werden, und sollte sich nur um das kümmern, was in ihm selbst vor sich geht, und höchstens Aktionen nach oben senden. Es sollte nicht am DOM an anderer Stelle beteiligt sein.

Ich denke, Sie wären mit einer Komponente besser bedient.

Gibt es einen Grund, warum Sie keine JavaScript-Funktion finden können, die das Latex, einschließlich des mathematischen Zeugs, verarbeitet und als HTML zurückgibt, das Sie dann in der Komponente rendern können? Wenn Sie eine DOM-Manipulation außerhalb des Frameworks vollständig vermeiden können, wäre das die beste Option.

3

Mein Anwendungsfall ist der folgende:

Ich verwende die Tag-Banner-Komponente und habe deren Quellcode bearbeitet. Im Grunde enthalten einige der Tag-Beschreibungen auf meiner Website Latex. Und ich möchte sie im Banner richtig rendern.

Ich wollte ein Skript in den „Head“-Bereich des benutzerdefinierten Themas einfügen, anstatt das Widget zu bearbeiten. Aber ich konnte keine Möglichkeit finden, festzustellen, ob das Widget bereits geladen ist. Daher erhalte ich im „Head“-Bereich ein leeres Element, wenn ich document.getElementById aufrufe, da die zugehörige HTML-Komponente, die die Tag-Beschreibung anzeigt, noch nicht geladen ist.

4

Sie können nicht garantieren, wann ein Widget oder eine Komponente geladen wird. Sie können die Arbeit jedoch in einem Komponentenereignis wie didInsertElement ausführen.