Comment résoudre le problème selon lequel le type renvoyé par ReactDom.render ne correspond pas au type requis ?
P粉289775043
P粉289775043 2023-09-09 11:11:26
0
1
641

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

P粉289775043
P粉289775043

répondre à tous(1)
P粉162773626

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;
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal