Conversione di un elemento dom in virtual-dom nei widget

Sviluppatore
1

Attualmente ho un elemento DOM che è il risultato di un rendering KaTeX personalizzato.

Viene generato in questo modo:

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

A questo punto dom_element contiene l’HTML che vorrei renderizzare. E lo restituisco in questo modo:

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

Poiché h si aspetta un VNode, questo genera un errore. Provo a fornire l’HTML interno invece:

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

Questo renderizza i tag all’interno di dom_element.innerHTML come testo puro e non come HTML.

C’è una soluzione a questo?

2

Un widget è quasi certamente lo strumento sbagliato per questo.

Un widget non dovrebbe accedere ad alcuna informazione diversa da quella che gli viene fornita esplicitamente tramite gli argomenti e dovrebbe quindi occuparsi solo di ciò che accade al suo interno e, al massimo, inviare azioni verso l’alto. Non dovrebbe essere coinvolto nel DOM altrove.

Sarebbe meglio usare un Componente, a mio parere.

C’è qualche motivo per cui non riesci a trovare una funzione JavaScript che elabori il latex, inclusi gli elementi matematici, e lo restituisca come HTML che puoi quindi renderizzare nel componente? Se riesci a evitare completamente la manipolazione del DOM esterna al framework, questa sarebbe l’opzione migliore.

3

Il mio caso d’uso è il seguente:

Sto utilizzando il componente tag banners e ne stavo modificando il codice sorgente. In sostanza, alcune delle descrizioni dei tag sul mio sito web includono latex. E voglio renderle correttamente nel banner.

Volevo aggiungere uno script alla sezione “Head” nel tema personalizzato, invece di modificare il widget. Ma non sono riuscito a trovare un modo per sapere se il widget è già stato caricato, quindi ottengo un elemento vuoto quando eseguo document.getElementById nella sezione “Head” perché il componente html correlato che visualizza la descrizione del tag non è ancora stato caricato.

4

Non è possibile garantire quando un widget o un componente viene caricato. Tuttavia, è possibile eseguire il lavoro in un evento del componente come didInsertElement.