Markdown渲染是主要关注点。此外,我还需要解析作为字符串传递的html。
您可以假设children
是作为字符串传递的html,
isParseRequired
被传递为true
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
我得到的错误是:
src/app/components/Markdown/index.tsx:48:7 - 错误 TS2322: 类型 '({children, isParseRequired }: {children: string; isParseRequired?: boolean | undefined; }) => void | Element' 不可分配给类型 'FC<{children: string; isParseRequired?: 布尔值 |不明确的; }>'。
注意:我正在使用*.tsx
PS:最初发布在https://github.com/orgs/remarkjs/discussions/1188
P粉1627736262023-09-10 09:17:37
删除ReactDom.render并将ReactMarkdown包装在片段标签中以返回FC并使用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;