Conversion d'un élément dom en virtual-dom dans les widgets

Dev
1

J’ai actuellement un élément DOM qui est le résultat d’un rendu KaTeX personnalisé.

Il est généré comme ceci :

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

À ce stade, dom_element contient le HTML que j’aimerais rendre. Et je le retourne comme ceci :

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

Étant donné que h attend un VNode, cela génère une erreur. J’essaie de donner le HTML interne à la place :

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

Cela rend les balises à l’intérieur de dom_element.innerHTML comme du texte brut et non comme du HTML.

Existe-t-il une solution à cela ?

2

Un widget n’est très probablement pas l’outil approprié pour cela.

Un widget ne devrait accéder à aucune autre information que celle qui lui est explicitement fournie via les arguments et ne devrait alors se préoccuper que de ce qui se passe à l’intérieur de lui-même et, au plus, renvoyer des actions vers le haut. Il ne devrait pas être impliqué dans le DOM ailleurs.

Vous feriez mieux d’utiliser un composant, à mon humble avis.

Y a-t-il une raison pour laquelle vous ne trouvez pas une fonction JavaScript qui traitera le latex, y compris les trucs mathématiques, et le retournera sous forme de HTML que vous pourrez ensuite rendre dans le composant ? Si vous pouvez éviter complètement la manipulation du DOM extra-cadre, ce serait la meilleure option.

3

Mon cas d’utilisation est le suivant :

J’utilise le composant de bannières d’étiquettes et j’ai modifié sa source. Essentiellement, certaines descriptions d’étiquettes sur mon site Web incluent du LaTeX. Et je veux les rendre correctement sur la bannière.

Je voulais ajouter un script à la section « Head » dans le thème personnalisé, au lieu de modifier le widget. Mais je n’ai pas trouvé comment savoir si le widget était déjà chargé, donc j’obtiens un élément vide lorsque j’utilise document.getElementById dans la section « Head » car le composant HTML associé qui affiche la description de l’étiquette n’est pas encore chargé.

4

Vous ne pouvez pas garantir quand un widget ou un composant est chargé. Cependant, vous pouvez effectuer le travail dans un événement de composant tel que didInsertElement.