Html-react-parser: Erreur TS : instanceof Element renvoie toujours false avec Next.js

Merci d'avoir ouvert le problème @purp1eeeee

Dans votre exemple CodeSandbox, vous ne retournez pas d'élément React, donc le remplacement ne fonctionnera pas. Voir Lisez -

Alors pouvez-vous remplacer les logs par un retour de votre élément personnalisé ?

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

Voir CodeSandbox mis à jour.

Je suis cette instruction et j'ai également le même problème, je ne peux pas obtenir la propriété attribs de domNode .

Parce que la vérification dactylographiée domNode est une instance de DOMNode , pas de type Element , de sorte que l'erreur se produit, car DOMNode n'a pas attribs biens.

Et si vous vérifiez avec cette condition console.log(domNode instanceof Element) le retour est toujours faux, car l'instance de domNode est DOMNode .

J'ai une solution pour cela, peut-être peut-il aider. J'ai défini le type Element au paramètre 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);
}

Je peux confirmer que j'ai le même problème avec un projet Next.js ; Le transtypage domNode type script

@kakaeriel
si bon! merci👍

Avoir ces problèmes avec un projet Typescript. Comme @kakaeriel, je suis cette instruction sur le remplacement, y compris la section sur Typescript.

La solution de @kakaeriel fonctionne pour moi. L'opérateur instanceof ne fonctionne pas (Element n'est pas un type) et après des heures à parcourir node_modules à la recherche d'une définition de type, trouver cette solution de contournement vous sauve la vie.

Merci d'avoir fourni une solution alternative @kakaeriel. Seriez-vous intéressé par la création d'un PR pour améliorer la documentation de README.md ?

@remarkablemark Oui bien sûr ! Je vais créer un PR, dès que possible.

Wow. J'ai le même problème avec NextJS.

Parce que la vérification dactylographiée domNode est une instance de DOMNode , pas de type Element , de sorte que l'erreur se produit, car DOMNode n'a pas attribs biens.

```

Alors pourquoi cela ne se produit-il que dans une application NextJS.
J'ai configuré une application dactylographiée react-scripts et là, cela fonctionne.
https://codesandbox.io/s/html-parsing-and-replacing-elements-yjtv7?file=/src/index.tsx

Je ne suis pas sûr que @Naxos84. Je parie que Next.js a une configuration TypeScript différente. Veuillez consulter la solution de @kakaeriel pour une solution de contournement.

@kakaeriel faites-moi savoir si vous êtes en mesure d'ouvrir un PR pour mettre à jour le README.md avec votre solution de contournement. Si vous ne pouvez pas le faire, je peux le faire. Merci!

Je ne pense pas que ce soit lié à NextJs.
J'ai essayé un peu plus et voila cela a fonctionné d'une manière ou d'une autre.
J'ai modifié @remarkablemark codesandbox et ajouté console.log(domElement.constructor) comme mentionné sur Stack Overflow .

Le résultat ressemble à ceci :

Donc je ne comprends pas pourquoi ça marche tout d'un coup !?

Bien que cela ne fonctionne pas dans "mon" projet nextjs.
Mise à jour : Et maintenant, cela ne fonctionne plus...

Je suggère d'utiliser un typeguard personnalisé.

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

Salut tout le monde, j'ai pu résoudre ce problème dans Next.js 10.x avec cette solution . C'est un Gist public où vous pouvez trouver mes détails d'implémentation actuels. La solution n'a aucune erreur de type dans ma configuration.

@natterstefan Merci d'avoir partagé votre solution !

J'ai le même problème avec NextJS. L'élément est toujours indéfini. J'ai tapé domNode comme any et converti le type d'options en HTMLReactParserOptions. L'élément de domhandler ne fonctionne pas avec le SSR ?

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

J'ai pu résoudre ce problème avec le code ci-dessous, j'espère que cela vous aidera