Html-react-parser: टीएस त्रुटि: उदाहरण के तत्व हमेशा Next.js के साथ झूठी वापसी करते हैं

मुद्दा खोलने के लिए धन्यवाद @purp1eeeee

आपके कोडसैंडबॉक्स उदाहरण में, आप एक प्रतिक्रिया तत्व नहीं लौटा रहे हैं, इसलिए प्रतिस्थापित करें काम नहीं करेगा। रीडमी देखें।

तो क्या आप लॉग को अपने कस्टम तत्व की वापसी से बदल सकते हैं?

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

अद्यतन कोडसैंडबॉक्स देखें।

मैं निम्नलिखित यह निर्देश है, और मैं भी एक ही समस्या है, मैं संपत्ति नहीं मिल सकता है attribs से domNode ।

क्योंकि टाइपप्रति जाँच domNode का उदाहरण है DOMNode , नहीं Element , प्रकार तो त्रुटि तब होती है, क्योंकि वह DOMNode नहीं है attribs संपत्ति।

और यदि आप इस शर्त के साथ जांचते हैं तो console.log(domNode instanceof Element) रिटर्न हमेशा झूठा होता है, क्योंकि डोमनोड का उदाहरण 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 प्रोजेक्ट के साथ एक ही समस्या हो रही है; टाइपस्क्रिप्ट टाइप-कास्टिंग domNode एचटीएमएल-रिएक्शन-पार्सर को अपग्रेड करने के बाद एकमात्र काम है।

@kakaeriel
कितना अच्छा! धन्यवाद

टाइपप्रति परियोजना के साथ इन मुद्दों का होना। @kakaeriel की तरह मैं टाइपस्क्रिप्ट पर अनुभाग सहित प्रतिस्थापन के बारे में इस निर्देश का पालन कर रहा हूं

@kakaeriel का समाधान मेरे लिए काम करता है। instanceof ऑपरेटर काम नहीं करता है (तत्व एक प्रकार नहीं है) और घंटों के बाद node_modules के माध्यम से एक प्रकार की परिभाषा की तलाश में ब्राउज़ करने के बाद, यह समाधान खोजना एक जीवन रक्षक है।

वैकल्पिक समाधान @kakaeriel प्रदान करने के लिए धन्यवाद। क्या आप README.md दस्तावेज़ीकरण को बेहतर बनाने के लिए पीआर बनाने में रुचि लेंगे?

@remarkablemark हाँ ज़रूर! मैं एक पीआर, ASAP बनाऊंगा।

वाह वाह। मुझे NextJS का उपयोग करने में एक ही समस्या है।

क्योंकि टाइपप्रति जाँच domNode का उदाहरण है DOMNode , नहीं Element , प्रकार तो त्रुटि तब होती है, क्योंकि वह DOMNode नहीं है attribs संपत्ति।

```

तो यह केवल नेक्स्टजेएस ऐप में ही क्यों होता है।
मैं एक प्रतिक्रिया-स्क्रिप्ट टाइपस्क्रिप्ट ऐप सेटअप करता हूं और वहां यह काम करता है।
https://codesandbox.io/s/html-parsing-and-replaceing-elements-yjtv7?file=/src/index.tsx

मुझे यकीन नहीं है @ Naxos84। मैं शर्त लगाता हूं कि Next.js में एक अलग टाइपस्क्रिप्ट कॉन्फ़िगरेशन है। कृपया @kakaeriel के बाहर की जाँच समाधान एक समाधान के लिए।

@kakaeriel मुझे बताएं कि क्या आप अपने कामकाज के साथ README.md को अपडेट करने के लिए पीआर खोलने में सक्षम हैं। यदि आप यह करने में असमर्थ हैं, तो मैं यह कर सकता हूं। धन्यवाद!

मुझे नहीं लगता कि यह नेक्स्टजे से संबंधित है।
मैंने थोड़ी और कोशिश की और वोइला ने किसी तरह काम किया।
मैंने @remarkablemark codesandbox बदल दिया और console.log(domElement.constructor) जोड़ा जैसा कि स्टैक ओवरफ़्लो पर बताया गया है।

परिणाम इस प्रकार दिखता है:

तो मुझे समझ में नहीं आता कि यह अचानक क्यों काम कर रहा है !?

हालांकि यह "my" 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 के साथ भी यही समस्या है। तत्व हमेशा अपरिभाषित होता है। मैंने डोमनोड को किसी के रूप में टाइप किया और विकल्प प्रकार को HTMLReactParserOptions के रूप में परिवर्तित किया। डोमहैंडलर से तत्व एसएसआर के साथ काम नहीं करता है?

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

मैं इसे नीचे दिए गए कोड के साथ ठीक करने में सक्षम था, आशा है कि यह मदद करेगा