英文:
ReactDom.render is returning different type than what I need, how to address it?
问题
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 - error TS2322: Type '({ children, isParseRequired }: { children: string; isParseRequired?: boolean | undefined; }) => void | Element' is not assignable to type 'FC<{ children: string; isParseRequired?: boolean | undefined; }>'.
注意：我正在使用 *.tsx 文件。
英文:
Markdown rendering is the primary focus. In addition I need to parse the html which is passed as string as well.
You can assume, children is a html passed as string
and isParseRequired is passed as 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
Error I am getting is :
src/app/components/Markdown/index.tsx:48:7 - error TS2322: Type '({ children, isParseRequired }: { children: string; isParseRequired?: boolean | undefined; }) => void | Element' is not assignable to type 'FC<{ children: string; isParseRequired?: boolean | undefined; }>'.
Note: I am using *.tsx
PS: Originally posted at https://github.com/orgs/remarkjs/discussions/1188
答案1
得分: 1
移除 ReactDom.render 并用 fragment 标签包裹 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 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;
英文:
Remove ReactDom.render and wrap ReactMarkdown with fragment tag to return FC and use rehype-raw plugin
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;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论