Html-react-parser: TS 오류: instanceof 요소는 Next.js에서 항상 false를 반환합니다.

문제를 열어주셔서 감사합니다 @purp1eeeeee

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 attribs 속성을 가져올 수 없습니다.

typescript check domNode 는 Element 유형이 아니라 DOMNode 인스턴스이므로 DOMNode 에 attribs 없기 때문에 오류가 발생합니다. 재산.

그리고 이 조건으로 console.log(domNode instanceof Element) 하면 domNode의 인스턴스가 DOMNode 이기 때문에 항상 false를 반환합니다.

이에 대한 해결책이 있습니다. 도움이 될 수 있습니다. 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 type-casting domNode 는 html-react-parser를 업그레이드한 후 유일한 해결 방법인 것 같습니다.

@kakaeriel
너무 좋아! 감사합니다👍

Typescript 프로젝트에 이러한 문제가 있습니다. @kakaeriel 처럼 Typescript의 섹션을 포함하여 교체하는 방법에 대한 이 지침을 따르고

@kakaeriel 의 솔루션이 저에게 효과적입니다. instanceof 연산자는 작동하지 않으며(요소는 유형이 아님) 유형 정의를 찾는 node_modules를 몇 시간 동안 탐색한 후 이 해결 방법을 찾는 것이 생명의 은인입니다.

@kakaeriel 대체 솔루션을 제공해 주셔서 감사합니다. README.md 문서를 개선하기 위해 PR을 작성하는 데 관심이 있으십니까?

@remarkablemark 네 맞습니다! 최대한 빨리 PR을 작성하겠습니다.

우와. NextJS를 사용하여 동일한 문제가 있습니다.

typescript check domNode 는 Element 유형이 아니라 DOMNode 인스턴스이므로 DOMNode 에 attribs 가 없기 때문에 오류가 발생합니다. 재산.

```

그렇다면 왜 이것이 NextJS 앱에서만 발생합니까?
react-scripts typescript 앱을 설정했는데 작동합니다.
https://codesandbox.io/s/html-parsing-and-replacing-elements-yjtv7?file=/src/index.tsx

@Naxos84는 잘 모르겠습니다. Next.js에는 다른 TypeScript 구성이 있습니다. 해결 방법은 @kakaeriel 의 솔루션 을 확인하세요.

@kakaeriel 이 PR을 열어 README.md 을 해결 방법으로 업데이트할 수 있는지 알려주세요. 당신이 할 수 없다면, 나는 할 수 있습니다. 감사 해요!

나는 그것이 NextJ와 관련이 있다고 생각하지 않습니다.
나는 조금 더 시도했고 어떻게 든 효과가 있었다.
@remarkablemark codesandbox를 변경하고 Stack Overflow에서 언급한 console.log(domElement.constructor) 를 추가했습니다.

결과는 다음과 같습니다.

왜 갑자기 작동하는지 이해가되지 않습니다!?

"내"nextjs 프로젝트에서 작동하지 않지만.
업데이트: 그리고 이제 다시 작동하지 않습니다....

사용자 정의 typeguard를 사용하는 것이 좋습니다.

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;

아래 코드로 이 문제를 해결할 수 있었습니다. 도움이 되었기를 바랍니다.