Html-react-parser: Kesalahan TS: Elemen instanceof selalu mengembalikan false dengan Next.js

Terima kasih telah membuka masalah @purp1eeeee

Dalam contoh CodeSandbox Anda, Anda tidak mengembalikan elemen React sehingga replace tidak akan berfungsi. Lihat readme .

Jadi bisakah Anda mengganti log dengan pengembalian elemen khusus Anda?

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>;
 }

Lihat CodeSandbox yang diperbarui.

Saya mengikuti instruksi ini , dan saya juga memiliki masalah yang sama, saya tidak bisa mendapatkan properti attribs dari domNode .

Karena typescript check domNode adalah instance dari DOMNode , bukan Element type, sehingga terjadi kesalahan, karena DOMNode belum attribs Properti.

Dan jika Anda memeriksa dengan kondisi ini console.log(domNode instanceof Element) return selalu salah, karena instance dari domNode adalah DOMNode .

Saya punya solusi untuk ini, mungkin bisa membantu. Saya mendefinisikan tipe Element pada parameter 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);
}

Saya dapat mengonfirmasi bahwa saya mengalami masalah yang sama dengan proyek Next.js; Pengecoran tipe TypeScript domNode tampaknya menjadi satu-satunya solusi setelah memutakhirkan html-react-parser.

@kakaeriel
sangat baik! terima kasih👍

Memiliki masalah ini dengan proyek TypeScript. Seperti @kakaeriel, saya mengikuti instruksi ini tentang penggantian termasuk bagian pada TypeScript.

Solusi dari @kakaeriel bekerja untuk saya. Operator instanceof tidak berfungsi (Elemen bukan tipe) dan setelah berjam-jam menelusuri node_modules mencari definisi tipe, menemukan solusi ini adalah penyelamat hidup.

Terima kasih telah memberikan solusi alternatif @kakaeriel. Apakah Anda tertarik untuk membuat PR untuk meningkatkan dokumentasi README.md ?

@remarkablemark Ya tentu! Saya akan membuat PR, ASAP.

Wow. Saya memiliki masalah yang sama menggunakan NextJS.

Karena typescript check domNode adalah instance dari DOMNode , bukan Element type, sehingga terjadi kesalahan, karena DOMNode belum attribs Properti.

```

Jadi mengapa ini hanya terjadi di aplikasi NextJS.
Saya menyiapkan aplikasi skrip skrip reaksi dan itu berfungsi.
https://codesandbox.io/s/html-parsing-and-replaceing-elements-yjtv7?file=/src/index.tsx

Saya tidak yakin @Naxos84. Saya yakin Next.js memiliki konfigurasi TypeScript yang berbeda. Silakan periksa solusi @kakaeriel untuk solusinya.

@kakaeriel beri tahu saya jika Anda dapat membuka PR untuk memperbarui README.md dengan solusi Anda. Jika Anda tidak dapat melakukannya, saya dapat melakukannya. Terima kasih!

Saya tidak berpikir itu terkait dengan NextJs.
Saya mencoba sedikit lagi dan voila entah bagaimana berhasil.
Saya mengubah @remarkablemark codesandbox dan menambahkan console.log(domElement.constructor) seperti yang disebutkan di Stack Overflow .

Hasilnya terlihat sebagai berikut:

Jadi saya tidak mengerti mengapa tiba-tiba bekerja!?

Meskipun itu tidak berfungsi di proyek nextjs "saya".
Pembaruan: Dan sekarang tidak berfungsi lagi ....

Saya sarankan menggunakan typeguard khusus.

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>;
        }
    },
};

Hai semuanya, saya dapat memperbaikinya di Next.js 10.x dengan solusi ini . Ini adalah Gist publik tempat Anda dapat menemukan detail implementasi saya saat ini. Solusinya tidak memiliki kesalahan tipe di pengaturan saya.

@natterstefan Terima kasih telah berbagi solusi Anda!

Saya memiliki masalah yang sama dengan NextJS. Elemen selalu tidak terdefinisi. Saya mengetik domNode sebagai apa saja dan mengonversi jenis opsi sebagai HTMLReactParserOptions. Elemen dari domhandler tidak berfungsi dengan SSR?

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

Saya dapat memperbaikinya dengan kode di bawah ini, semoga membantu