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：

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

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

标签： reactjsnext.jsmarkdownreact-markdown

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} />;
};

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