Bagaimana untuk menyelesaikan masalah bahawa jenis yang dikembalikan oleh ReactDom.render tidak sepadan dengan jenis yang diperlukan?

Question

Rendering penurunan harga adalah fokus utama. Selain itu, saya perlu menghuraikan html yang diluluskan sebagai rentetan.

Anda boleh menganggap children ialah html yang diluluskan sebagai rentetan, isParseRequired diluluskan sebagai benar

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

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

Nota: Saya menggunakan *.tsx

PS: Asalnya diterbitkan di https://github.com/orgs/remarkjs/discussions/1188

Answer 1

Alih keluar ReactDom.render dan balut ReactMarkdown dalam teg serpihan untuk kembali ke FC dan gunakan pemalam 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;