2025-02-14 SyntaxHighlighter cannot be used as a JSX component

import {Prism as SyntaxHighlighter  , SyntaxHighlighterProps} from 'react-syntax-highlighter'

...
 <SyntaxHighlighter
            {...rest}
            PreTag="div"
            children={String(children).replace(/\n$/, '')}
            language={match[1]}
            style={oneDark}
          />
...

image.png

解決方法:

import {Prism, SyntaxHighlighterProps} from 'react-syntax-highlighter'
const SyntaxHighlighter = (Prism as any) as React.FC<SyntaxHighlighterProps>;

...
    <SyntaxHighlighter
            {...rest}
            PreTag="div"
            children={String(children).replace(/\n$/, '')}
            language={match[1]}
            style={oneDark}
          />
...
image.png

參考地址:https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/539

image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 目錄 1 前言 2 babel 3 webpack配置說明1 webpack.config.js2 .babelr...
    羅坤_23333閱讀 1,580評(píng)論 0 0
  • 1.前言 最近有很多朋友問我有沒有相關(guān)的書籍推薦,希望能夠自學(xué)一下前端。 正好最近在查閱文章的時(shí)候,發(fā)現(xiàn)有朋友已經(jīng)...
    MR_LIXP閱讀 116,858評(píng)論 223 4,482
  • 1.前言最近有很多朋友問我有沒有相關(guān)的書籍推薦,希望能夠自學(xué)一下前端。正好最近在查閱文章的時(shí)候,發(fā)現(xiàn)有朋友已經(jīng)進(jìn)行...
    AlbenXie閱讀 1,388評(píng)論 0 31
  • 原文鏈接:http://www.itdecent.cn/p/3345e94baec0[https://www.j...
    阿bai君閱讀 304評(píng)論 0 0
  • 原文鏈接:http://www.itdecent.cn/p/3345e94baec0[https://www.j...
    阿bai君閱讀 584評(píng)論 0 1

友情鏈接更多精彩內(nèi)容