Comment résoudre le problème selon lequel le type renvoyé par ReactDom.render ne correspond pas au type requis ?

Question

Le rendu Markdown est l'objectif principal. De plus, je dois analyser le code HTML passé sous forme de chaîne.

Vous pouvez supposer que children est le code HTML passé sous forme de chaîne, isParseRequired est considéré comme vrai

import cx from 'classnames'
import 'github-markdown-css'
import 'katex/dist/katex.min.css'
import { FC, ReactNode, useEffect, useMemo, useState } from 'react'
import { CopyToClipboard } from 'react-copy-to-clipboard'
import { BsClipboard } from 'react-icons/bs'
import ReactDom from 'react-dom'
import ReactMarkdown from 'react-markdown'
import reactNodeToString from 'react-node-to-string'
import rehypeHighlight from 'rehype-highlight'
import remarkBreaks from 'remark-breaks'
import remarkGfm from 'remark-gfm'
import remarkMath from 'remark-math'
import supersub from 'remark-supersub'
import Tooltip from '../Tooltip'
import './markdown.css'

const Markdown: FC<{ children: string, isParseRequired?: boolean}> = ({ children, isParseRequired = false }) => {
    return ReactDom.render(
      <ReactMarkdown
        remarkPlugins={[remarkMath, supersub, remarkBreaks, remarkGfm]}
        rehypePlugins={[[rehypeHighlight, { detect: true, ignoreMissing: true }]]}
        className={`markdown-body markdown-custom-styles !text-base font-normal`}
        linkTarget="_blank"
        components={{
          a: ({ node, ...props }) => {
            if (!props.title) {
              return <a {...props} />
            }
            return (
              <Tooltip content={props.title}>
                <a {...props} title={undefined} />
              </Tooltip>
            )
          },
          code: ({ node, inline, className, children, ...props }) => {
            if (inline) {
                return (
                  <code className={className} {...props}>
                    {children}
                  </code>
                )
            }
            return <CustomCode className={className}>{children}</CustomCode>
          },
        }}
        children={children}/>,
        document.body)
}

export default Markdown

L'erreur que j'obtiens est : src/app/components/Markdown/index.tsx:48:7 - 错误 TS2322: 类型 '({children, isParseRequired }: {children: string; isParseRequired?: boolean | undefined; }) => void | Element' 不可分配给类型 'FC<{children: string; isParseRequired?: 布尔值 |不明确的; }>'。

Remarque : j'utilise *.tsx

PS : initialement publié sur https://github.com/orgs/remarkjs/discussions/1188

Answer 1

Supprimez ReactDom.render et enveloppez ReactMarkdown dans une balise fragment pour revenir à FC et utiliser le plugin rehype-raw

import cx from "classnames";
import "github-markdown-css";
import "katex/dist/katex.min.css";
import { FC, ReactNode, useEffect, useMemo, useState } from "react";
import { CopyToClipboard } from "react-copy-to-clipboard";
import { BsClipboard } from "react-icons/bs";
import ReactDom from "react-dom";
import ReactMarkdown from "react-markdown";
import reactNodeToString from "react-node-to-string";
import rehypeHighlight from "rehype-highlight";
import remarkBreaks from "remark-breaks";
import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";
import supersub from "remark-supersub";
import Tooltip from "../Tooltip";
import "./markdown.css";
import rehypeRaw from "rehype-raw"; 

const Markdown: FC<{ children: string, isParseRequired?: boolean }> = ({
  children,
  isParseRequired = false,
}) => {
  return (
    <>
      <ReactMarkdown
        remarkPlugins={[remarkMath, supersub, remarkBreaks, remarkGfm]}
        rehypePlugins={[
          [rehypeHighlight, { detect: true, ignoreMissing: true }], rehypeRaw
        ]}
        className={`markdown-body markdown-custom-styles !text-base font-normal`}
        linkTarget="_blank"
        components={{
          a: ({ node, ...props }) => {
            if (!props.title) {
              return <a {...props} />;
            }
            return (
              <Tooltip content={props.title}>
                <a {...props} title={undefined} />
              </Tooltip>
            );
          },
          code: ({ node, inline, className, children, ...props }) => {
            if (inline) {
              return (
                <code className={className} {...props}>
                  {children}
                </code>
              );
            }
            return <CustomCode className={className}>{children}</CustomCode>;
          },
        }}
        children={children}
      />
    </>
  );
};

export default Markdown;