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
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
删除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;