小编Jay*_*odi的帖子

目前我正在使用"react": "17.0.2"并且已经安装"react-markdown": "^7.0.1"通过npm i react-markdown我正在使用这个包来显示我从 Strapi CMS 获取的富文本。我使用以下代码来显示内容：

import ReactMarkdown from "react-markdown";

export default function name({ posts }) {
  return (
    <>
      <div>
        <div>
          {posts.Title}
        </div>
      </div>
      <div>
        <ReactMarkdown source={posts.Content} escapeHtml={false} />
      </div>
    </>
  );
}

export async function getStaticProps() {
  const res = await fetch("http://localhost:1337/blogs");
  const posts = await res.json();

  return {
    props: { posts },
  };
}

但是当我运行它时，它给了我以下错误：

我正在使用节点v14.17.0并尝试添加"type": "module".

我的package.json：

import ReactMarkdown from "react-markdown";

export …

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

这是我的 Strapi Markdown 中的内容：\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