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
Supprimez ReactDom.render et enveloppez ReactMarkdown dans une balise fragment pour revenir à FC et utiliser le plugin rehype-raw