Html-react-parser: TS 错误：instanceof Element 始终使用 Next.js 返回 false

感谢您打开问题@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 。

我按照这个指令，我也有同样的问题，我无法从domNode获取属性attribs domNode 。

因为打字稿检查domNode是DOMNode实例，而不是Element类型，所以会出现错误，因为DOMNode没有attribs财产。

如果你检查这个条件console.log(domNode instanceof Element)返回总是假的，因为 domNode 的实例是DOMNode 。

我有解决方案，也许可以提供帮助。 我在参数 domNode 中定义了Element类型。

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-react-parser 后唯一的解决方法。

@卡卡瑞尔
超好的！ 谢谢👍

Typescript 项目存在这些问题。 像@kakaeriel一样，我正在遵循有关替换的说明，

@kakaeriel的解决方案对我instanceof运算符不起作用（Element 不是类型），并且在浏览 node_modules 寻找类型定义数小时后，找到此解决方法是一种救命稻草。

感谢您提供替代解决方案@kakaeriel。 您是否有兴趣创建一个 PR 来改进README.md文档？

@remarkablemark是的！ 我会尽快创建一个 PR。

哇。 我在使用 NextJS 时遇到了同样的问题。

因为打字稿检查domNode是DOMNode实例，而不是Element类型，所以会出现错误，因为DOMNode没有attribs财产。

``

那么为什么这只发生在 NextJS 应用程序中。
我设置了一个 react-scripts 打字稿应用程序，它在那里工作。
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)堆栈溢出中提到的console.log(domElement.constructor) 。

结果如下所示：

所以我不明白为什么它突然起作用了！？

虽然它在“我的”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 中

@natterstefan感谢您分享您的解决方案！

我对 NextJS 也有同样的问题。 元素始终未定义。 我将 domNode 输入为 any 并将选项类型转换为 HTMLReactParserOptions。 来自 domhandler 的元素不适用于 SSR？

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

我能够用下面的代码解决这个问题，希望它会有所帮助