在 React 中使用 Markdown

815 阅读1分钟

在 React 中使用 Markdown 非常简单,首先你需要安装一个包来解析 Markdown,比如 marked。你可以使用以下命令安装:

Copy code
npm install marked

然后你可以在你的 React 组件中这样使用:

Copy code
import React from 'react';
import marked from 'marked';

function MyComponent() {
  const markdown = `
# This is a heading

And this is some text.
`;

  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: marked(markdown) }} />
    </div>
  );
}

这样就可以在你的组件中渲染出 Markdown 了。

注意:使用 dangerouslySetInnerHTML 设置 HTML 是一个危险的操作,因为它可能会导致 XSS 攻击。如果你的 Markdown 来自于不可信源,你应该使用一个 Markdown 解析器来避免这个问题。