تحويل عنصر dom إلى virtual-dom في الويدجتس

مطور
1

لدي حاليًا عنصر DOM ناتج عن عرض KaTeX مخصص.

يتم إنشاؤه على هذا النحو:

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

في هذه المرحلة، يحتوي dom_element على HTML الذي أود عرضه. وأقوم بإرجاعه على هذا النحو:

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

نظرًا لأن h يتوقع VNode، فإن هذا يعطي خطأ. أحاول تقديم المحتوى الداخلي بدلاً من ذلك:

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

هذا يعرض العلامات داخل dom_element.innerHTML كنص عادي وليس كـ HTML.

هل هناك حل لهذا؟

2

من شبه المؤكد أن الأداة المصغرة (widget) ليست الأداة المناسبة لهذا.

لا يجب أن تصل الأداة المصغرة إلى أي معلومات أخرى غير تلك التي تُغذى إليها صراحةً عبر الوسائط (args) ويجب أن تهتم فقط بما يحدث بداخلها، وفي أقصى الأحوال، ترسل إجراءات إلى الأعلى. لا ينبغي أن تشارك في نموذج كائن المستند (DOM) في أي مكان آخر.

سيكون استخدام مكون (Component) أفضل في رأيي.

هل هناك أي سبب لعدم تمكنك من العثور على دالة جافاسكريبت (javascript) تعالج صيغة لاتكس (latex)، بما في ذلك الأمور الرياضية، وتعيدها كـ HTML، والتي يمكنك بعد ذلك عرضها في المكون؟ إذا كان بإمكانك تجنب التلاعب بنموذج كائن المستند (DOM) خارج الإطار تمامًا، فسيكون هذا هو الخيار الأفضل.

3

حالة الاستخدام الخاصة بي هي كما يلي:

أنا أستخدم مكون علامات اللافتات (tag banners) وكنت أقوم بتحرير مصدره. في الأساس، تتضمن بعض أوصاف العلامات على موقعي الإلكتروني صيغة لاتكس (latex). وأريد عرضها بشكل صحيح على اللافتة.

أردت إضافة نص برمجي إلى قسم “الرأس” (Head) في تخصيص السمة (customize theme)، بدلاً من تحرير الأداة المصغرة (widget). لكنني لم أتمكن من إيجاد طريقة لمعرفة ما إذا كانت الأداة المصغرة قد تم تحميلها بعد، لذلك أحصل على عنصر فارغ عندما أقوم بتشغيل document.getElementById في قسم “الرأس” لأن المكون المرتبط الذي يعرض وصف العلامة لم يتم تحميله بعد.

4

لا يمكنك ضمان وقت تحميل عنصر واجهة مستخدم أو مكون. ومع ذلك، يمكنك القيام بالعمل في حدث مكون مثل didInsertElement.