首页  >  问答  >  正文

如何解决ReactDom.render返回的类型与所需类型不匹配的问题?

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粉289775043P粉289775043428 天前629

全部回复(1)我来回复

  • P粉162773626

    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;

    回复
    0
  • 取消回复