在react-markdown中添加多个换行符

Question

目前，我正在使用 React，并且在 Strapi CMS 中的富文本中包含内容，这些内容在 Markdown 版本中按照我想要的方式间隔开，但是一旦我切换到预览或在浏览器中查看内容，空格就会消失离开。我尝试过添加<br/>标签，但仍然没有换行符。

\n

这是我的 Strapi Markdown 中的内容：\n

\n

但这是我网页上的输出：\n

\n

这是我当前的代码：

\n

import ReactMarkdown from "react-markdown";\nimport rehypeRaw from "rehype-raw";\nexport\xc2\xa0default\xc2\xa0function\xc2\xa0name({\xc2\xa0posts })\xc2\xa0{\n\xc2\xa0\xc2\xa0return\xc2\xa0(\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0<>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0<div>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0{posts.Title}\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0</div>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0<div>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0<ReactMarkdown\xc2\xa0children={posts.Content}\xc2\xa0rehypePlugins={[rehypeRaw]}\xc2\xa0/>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0</div>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0</>\n\xc2\xa0\xc2\xa0);\n}\n

\n

Answer 1

使用注释中断

并替换\n为  \n. 如果一个\n不起作用，请尝试再添加一个

import remarkBreaks from "remark-breaks";

//...

<ReactMarkdown 
  remarkPlugins={[remarkBreaks]}
  rehypePlugins={[rehypeRaw]}
  children={posts.Content.replace(/\n/gi, "&nbsp; \n")}
/>