0

我正在尝试使用 Next.js 开发一个博客应用程序。在这个应用程序中，有一个组件接受一个降价文件并将其内容呈现为一个博客页面。

import ReactMarkdown from 'react-markdown';
import { NormalComponents, SpecialComponents } from 'react-markdown/lib/ast-to-react';
import { materialLight } from 'react-syntax-highlighter/dist/cjs/styles/prism';
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
import { FunctionComponent } from 'react';

interface IProps {
    content: string;
}

const Markdown: FunctionComponent<IProps> = ({content}) => {
    const components: Partial<NormalComponents & SpecialComponents> = {
        code({node, inline, className, children, ...props}) {
            const match = /language-(\w+)/.exec(className || '');
    
            return (!inline && match) ? (
                <SyntaxHighlighter style={materialLight} PreTag="div" language={match[1]} children={String(children).replace(/\n$/, '')} {...props} />
            ) : (
                <code className={className ? className : ""} {...props}>
                    {children}
                </code>
            )
        }
    }

    return <div className="markdown-body">
        <ReactMarkdown components={components} children={content} />
    </div>
}

export default Markdown;

但是，当我尝试构建应用程序时，它失败了，并引发了以下错误。

类型 '({ node, inline, className, children, ...props }: { [x: string]: any; node: any; inline: any; className: any; children: any; }) => Element' 是不可分配给类型 '(("code" | ((props: ClassAttributes & HTMLAttributes & ReactMarkdownProps) => ReactNode)) & (keyof IntrinsicElements | CodeComponent)) | 不明确的'。类型 '({ node, inline, className, children, ...props }: { [x: string]: any; node: any; inline: any; className: any; children: any; }) => Element' 是不可分配给类型“代码”和代码组件。类型 '({ node, inline, className, children, ...props }: { [x: string]: any; node: any; inline: any; className: any; children: any; }) => Element' 是不可分配给类型“代码”。

由于我对 Next.js 很陌生，我真的无法理解为什么会发生这种情况。在网上搜索了很多，但找不到满意的答案。我唯一能理解的是，这是关于一些缺失的类型，但除此之外无法取得任何进展。

如何避免此问题并构建我的 Next.js 应用程序？高度赞赏所有帮助。

4

0 回答 0