Html-react-parser: Ошибка TS: instanceof Element всегда возвращает false с Next.js

Спасибо за открытие вопроса @ purp1eeeee

В вашем примере CodeSandbox вы не возвращаете элемент React, поэтому замена не сработает. См. Readme .

Так можно ли заменить журналы возвращением своего пользовательского элемента?

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 type, поэтому возникает ошибка, потому что 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; Приведение типов в Typescript domNode кажется единственным решением после обновления html-response-parser.

@kakaeriel
так хорошо! спасибо

Возникли эти проблемы с проектом Typescript. Как и @kakaeriel, я следую этой инструкции по замене, включая раздел Typecript.

У меня работает решение от instanceof не работает (элемент не является типом), и после нескольких часов просмотра node_modules в поисках определения типа поиск этого обходного пути спасает жизнь.

Спасибо за альтернативное решение @kakaeriel. Вы были бы заинтересованы в создании PR для улучшения документации README.md ?

@remarkablemark Да, конечно! Я создам пиар как можно скорее.

Вот это да. У меня такая же проблема с NextJS.

Поскольку проверка машинописного текста domNode является экземпляром типа DOMNode , а не Element type, поэтому возникает ошибка, потому что DOMNode не имеет attribs имущество.

`` ''

Так почему это происходит только в приложении NextJS?
Я настраиваю приложение для машинописных сценариев, и оно работает.
https://codesandbox.io/s/html-parsing-and-replacing-elements-yjtv7?file=/src/index.tsx

Я не уверен, @ Naxos84. Готов поспорить, у Next.js другая конфигурация TypeScript. Пожалуйста, ознакомьтесь с решением @kakaeriel для обходного пути.

@kakaeriel, дайте мне знать, сможете ли вы открыть PR, чтобы обновить README.md своим обходным путем. Если вы не можете это сделать, я могу это сделать. Спасибо!

Не думаю, что это связано с NextJs.
Я попробовал еще немного, и вуаля, как-то сработало.
Я изменил коды @remarkablemark и добавил console.log(domElement.constructor) как упоминалось в Stack Overflow .

Результат выглядит следующим образом:

Так что я не понимаю, почему он вдруг заработал !?

Хотя в «моем» проекте nextjs он не работает.
Обновление: И теперь он снова не работает ....

Я предлагаю использовать кастомную охрану.

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;

Я смог исправить это с помощью приведенного ниже кода, надеюсь, это поможет