reactjs - 在 NextJS/React 中渲染 markdown 的问题

Question

我再次尝试在 NextJS/React 中呈现 markdown。由于某种原因，我的代码不起作用，这里是：

import ReactMarkdown from "react-markdown";
import gfm from 'remark-gfm';
const PostContent = () => {
    const source = `
        # Hello, world!
        ---
        ~this doesn't work.~
    `
    return (
        <ReactMarkdown remarkPlugins={[gfm]} children={source} />
    );
};

export default PostContent;

它不是渲染降价，而是正常输出文本，就好像它是 JSON：

谁能告诉我为什么会发生这种情况以及如何解决？谢谢！

我无法提供更多细节，因为这就是所有代码。

Answer 1

这似乎是一个空白问题，你太多了。

这不起作用：

const PostContent = () => {
    const source = `
        # Hello, world!
        ---
        ~this doesn't work.~
    `
    return (
        <ReactMarkdown remarkPlugins={[gfm]} children={source} />
    );
};

这有效：

const PostContent = () => {
  const source = `
# Hello, world!
---
~this doesn't work.~
`;
  return <ReactMarkdown remarkPlugins={[gfm]} children={source} />;
};

请注意，每行的“前导”空格已被删除

Answer 2

您需要删除第一个空行和每行开头的所有空格。它可能看起来很奇怪——但这正是你ReactMarkdown期望做的。

您的组件最终将如下所示：注意反引号文本内的“奇怪”间距。

import ReactMarkdown from "react-markdown";
import gfm from 'remark-gfm';

const PostContent = () => {

    const source = `
# Hello, world!
---
~this doesn't work.~
`
    return (
        <ReactMarkdown remarkPlugins={[gfm]} children={source} />
    );
};

export default PostContent;