带有react-markdown的新行

Question

我试图从 firebase 数据库中提取 markdown 字符串，然后使用react-markdown 将其渲染到组件中。但 Markdown 字符串无法正确显示。我认为问题是由于从新行开始。

我试图声明我在其中放置 markdown 的变量。有用。 在组件中创建的 markdown 字符串

但是从 firebase 数据库中提取的 markdown 字符串。它显示不正确。 从 firebase 数据库中提取的 markdown 字符串

这是我的代码

export default function BlogTemplate() {
  const { id } = useParams();
  useFirestoreConnect([
    {
      collection: "communications",
      doc: id
    }
  ]);
  const post = useSelector(
    state =>
      state.firestore.data.communications &&
      state.firestore.data.communications[id]
  );

  if (post) {
    const input =
      "# This is a header\n\nAnd this is a paragraph \n\n # This is header again"; // this is a markdown string created in Component
    const postContent = post.content; // This is the markdown string pulled from firebase database
    return (
      <Layout>
        <Container>
          <Content className="pt-5 pb-5">
            <ReactMarkdown source={input} />
            <ReactMarkdown source={postContent} />
          </Content>
        </Container>
      </Layout>
    );
  } else {
    return <p>Loading...</p>;
  }
}

Answer 1

首先创建css类例如

.foo {white-space: 'pre-wrap';}

然后将类名添加到 Markdown 组件中

<ReactMarkdown source={input} className="foo" />

Answer 2

看来你需要在 \n 之前添加 2 个空格，如下所示：“这是一个标题 \n \n这是一个段落”。

让我知道这是否适合您。

更多信息在这里： https ://github.com/remarkjs/react-markdown/issues/273