0

我有一个项目在前端使用 next.js，在后端使用strapi。为了渲染使用 markdown 的strapi 的到达文本，我在前端使用 ReactMarkdown 包版本“6.0.3”。

它运作良好 - 除了删除线和下划线。为了使删除线起作用（现在它只是呈现这样的文本：~~一些要删除的文本~~），我需要添加一个名为 remarkgfm 或 gfm 的插件，并且对于下划线 - 它只显示一些文本标签和没有下划线文本，为此我需要添加一个名为 rehype-raw 的插件。那是来自文档：

附录 A：markdown react-markdown 中的 HTML 通常会转义 HTML（或使用 skipHtml 忽略它），因为它很危险并且违背了这个库的目的。但是，如果您在受信任的环境中（您信任降价），并且可以节省包大小（±60kb 压缩），那么您可以使用 rehype-raw：

那是因为它不是直接翻译html。

这是我的代码：

import ReactMarkdown from 'react-markdown'
import gfm from 'remark-gfm'
import remarkGfm from 'remark-gfm'


import style from './single-paragraph.module.scss'

const SingleParagraph = ( { subTitle, text, image, floatPosition } ) => {
  
  const styleRow = {display: 'flex', flexDirection: 'row', alignItems: 'start'}
  const styleRowReverse = {display:'flex', flexDirection: 'row-reverse', alignItems: 'start'}
return (
    <div className={style.container}>
      {subTitle && <h3 className={style.sub_title}>{subTitle}</h3>}
      <div className={style.text_container}>
          <div style={floatPosition==='end' ? styleRow : styleRowReverse} className={style.flex}>
          {text &&
            <ReactMarkdown 
              className={style.text} 
              linkTarget={ (href) => href.startsWith('http') ? "_blank" : "_self" }
              remarkPlugins={[remarkGfm]} 
            >{text}</ReactMarkdown> 
          }
          {image && <img src={image.url} width={image.width} height={image.height} alt="image" className={style.img}/>}
        </div>
      </div>
      
    </div>
  )
}

export default SingleParagraph

但随后它给了我以下错误：

TypeError: Cannot read properties of undefined (reading '2')

我尝试将此添加到 next.config.js，因为此讨论建议 https://github.com/vercel/next.js/issues/25454 ：

const withTM = require("next-transpile-modules")([
  "react-markdown",
  "remark-gfm",
  "micromark-extension-gfm",
  "micromark-util-combine-extensions",
  "micromark-util-chunked",
  "micromark-util-character",
  "micromark-util-sanitize-uri",
  "micromark-util-encode",
  "micromark-util-classify-character",
  "micromark-util-resolve-all",
  "micromark-factory-space",
  "mdast-util-gfm",
  "ccount",
  "mdast-util-find-and-replace",
  "unist-util-visit-parents",
  "unist-util-is",
  "mdast-util-to-markdown",
  "markdown-table",
]);

module.exports = withTM({ webpack5: false });

然后在我的文件中导入降价：

import Markdown from 'react-markdown/react-markdown.min'

但仍然给出该错误，我在配置上做错了什么？

4

1 回答 1

1

我无法说出您的错误，并且我认识到您已尝试利用插件来克服您的ins问题del。

但是，remark markdown 处理器支持CommonMark 规范，该规范不包括对insordel标签的支持。大概react-markdown组件和插件受CommonMark限制：

  1. 为什么没有下划线？
  2. 三振出局？
于 2022-01-11T22:40:01.433 回答