Html-react-parser: خطأ TS: يعرض مثيل العنصر دائمًا false مع Next.js

شكرا لفتح العدد @ purp1eeeee

في مثال CodeSandbox الخاص بك ، أنت لا تقوم بإرجاع عنصر React ، لذا لن يعمل الاستبدال. انظر الملف التمهيدي .

فهل يمكنك استبدال السجلات بإرجاع العنصر المخصص؟

export default function IndexPage() {
   const html = "<h1>hoge</h1>";
   const options: HTMLReactParserOptions = {
     replace: (domNode) => {
-      console.log(domNode);
-      console.log(domNode instanceof Element);
+      if (domNode.name === "h1") {
+        return <h1>replaced</h1>;
+      }
     }
   };
   return <div>{parse(html, options)}</div>;
 }

انظر CodeSandbox المحدث.

لقد اتبعت هذه التعليمات ، ولدي أيضًا نفس المشكلة ، لا يمكنني الحصول على العقار attribs من domNode .

لأن الشيك المطبوع عليه domNode هو مثيل من النوع DOMNode ، وليس Element النوع ، لذلك يحدث الخطأ ، لأن DOMNode ليس attribs خاصية.

وإذا تحققت من هذا الشرط console.log(domNode instanceof Element) فإن الإرجاع خاطئ دائمًا ، لأن مثيل domNode هو DOMNode .

لدي حل لهذا ، ربما يمكنني المساعدة. لقد حددت النوع Element في المعلمة domNode.

import parse, { HTMLReactParserOptions } from "html-react-parser";
import { Element } from "domhandler/lib/node";

export function contentHandler(postContent: string) {
  const options: HTMLReactParserOptions = {
    replace: (domNode: Element) => {
      if (domNode.attribs) {
        if (domNode.attribs.id === 'shortcode') {
          return <div className="leadform">Shortcode</div>;
        }
      }
    },
  };

  return parse(postContent, options);
}

يمكنني أن أؤكد أنني أواجه نفس المشكلة مع مشروع Next.js ؛ يبدو أن Type-casting domNode هو الحل الوحيد بعد ترقية html-reaction-parser.

تضمين التغريدة
جيد جدا! شكرا

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

الحل من kakaeriel يناسبني. عامل التشغيل instanceof لا يعمل (العنصر ليس نوعًا) وبعد ساعات من التصفح عبر node_modules بحثًا عن تعريف للنوع ، فإن العثور على هذا الحل هو منقذ للحياة.

شكرا لتقديم حل بديل kakaeriel. هل أنت مهتم بإنشاء علاقات عامة لتحسين وثائق README.md ؟

remarkablemark نعم بالتأكيد! سأقوم بإنشاء علاقات عامة ، في أسرع وقت ممكن.

رائع. لدي نفس المشكلة باستخدام NextJS.

نظرًا لأن الشيك المطبوع عليه domNode هو مثيل من النوع DOMNode ، وليس Element ، لذلك يحدث الخطأ ، لأن DOMNode ليس attribs خاصية.

""

فلماذا يحدث هذا فقط في تطبيق NextJS.
أقوم بإعداد تطبيق نصي للبرامج النصية التفاعلية وهناك يعمل.
https://codesandbox.io/s/html-parsing-and-replacing-elements-yjtv7؟file=/src/index.tsx

لست متأكدا من @ Naxos84. أراهن أن Next.js لديه تكوين TypeScript مختلف. يرجى مراجعة حل kakaeriel للحصول على حل بديل.

kakaeriel أعلمني إذا كنت قادرًا على فتح العلاقات العامة لتحديث README.md بحلك البديل. إذا كنت غير قادر على القيام بذلك ، يمكنني القيام بذلك. شكرا!

لا أعتقد أنه متعلق بـ NextJs.
حاولت أكثر من ذلك بقليل وفويلا عملت بطريقة ما.
لقد غيرت remarkablemark codeandbox وأضفت console.log(domElement.constructor) كما هو مذكور في Stack Overflow .

تبدو النتيجة كما يلي:

لذلك أنا لا أفهم لماذا تعمل فجأة !؟

على الرغم من أنه لا يعمل في مشروع nextjs "my".
تحديث: والآن لا يعمل مرة أخرى ....

أقترح استخدام أداة طباعة مخصصة.

const isElement = (domNode: DOMNode): domNode is Element => {
    const isTag = domNode.type === "tag";
    const hasAttributes = (domNode as Element).attribs !== undefined;

    return isTag && hasAttributes;
};

const parserOptions: HTMLReactParserOptions = {
    replace: domNode => {
        if (isElement(domNode)) {
            return <p>It's an element.</p>;
        } else {
            return <p>It's something else</p>;
        }
    },
};

مرحبًا بالجميع ، لقد تمكنت من إصلاح هذا في Next.js 10.x باستخدام هذا الحل . إنها Gist العامة حيث يمكنك العثور على تفاصيل التنفيذ الحالية الخاصة بي. الحل لا يحتوي على أخطاء من النوع الصفري في الإعداد الخاص بي.

natterstefan شكرا لتقاسم الحل الخاص بك!

لدي نفس المشكلة مع NextJS. العنصر دائمًا غير محدد. لقد كتبت domNode على أنه أي شيء وقمت بتحويل نوع الخيارات إلى HTMLReactParserOptions. عنصر من domhandler لا يعمل مع SSR؟

const options = {
  replace: (domNode: any) => {
      // ...
  }
} as HTMLReactParserOptions;

لقد تمكنت من إصلاح هذا بالرمز أدناه ، وآمل أن يساعد