NextJS/React 中呈现降价的问题

Question

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

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;

它不是渲染 markdown，而是正常输出文本，就好像它是 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;

NextJS/React 中呈现降价的问题

Problem with rendering markdown in NextJS/React

markdown

reactjs

next.js

react-markdown