Markdown-Rendering steht im Mittelpunkt. Außerdem muss ich den als String übergebenen HTML-Code analysieren.
Sie können davon ausgehen, dasschildrender HTML-Code als Zeichenfolge übergeben wird.isParseRequiredwird als wahr übergeben
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( { if (!props.title) { return } return ( ) }, code: ({ node, inline, className, children, ...props }) => { if (inline) { return ( {children} ) } return {children} }, }} children={children}/>, document.body) } export default Markdown
Der Fehler, den ich erhalte, ist:src/app/components/Markdown/index.tsx:48:7 - 错误 TS2322: 类型 '({children, isParseRequired }: {children: string; isParseRequired?: boolean | undefined; }) => void | Element' 不可分配给类型 'FC<{children: string; isParseRequired?: 布尔值 |不明确的; }>'。
Hinweis: Ich verwende*.tsx
PS: Ursprünglich veröffentlicht unter https://github.com/orgs/remarkjs/discussions/1188
删除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 ( <> { if (!props.title) { return ; } return ( ); }, code: ({ node, inline, className, children, ...props }) => { if (inline) { return ( {children} ; }, }} children={children} /> ); }; export default Markdown; {children}); } return