reactjs - 在 react-markdown 中呈现 HTML 的任何方式

Question

我正在使用 tinymce 接受来自用户的 Markdown 数据。输出数据是html。我想在页面上显示该数据。我正在使用 react-markdown 。我可以在页面上看到数据，但它是 HTML 标签。有什么方法可以显示 HTML 页面而不是标签？

export default function ThePage() {
  const markdown = {
    description: "<p>Hello from the other </p>\n<p><strong>side</strong></p>",
  }

  return (
    <>
      <ReactMarkdown children={markdown.description} />
    </>
  );
}

Answer 1

ReactMarkdown 组件用于渲染标记 down，而不是 HTML 标记 up 😏。给定 HTML 输入，它只是将其转义，这就是为什么您将其视为“源”而不是格式化文本的原因。

如果需要与 HTML 一起使用，则需要应用插件，例如 rehypeRaw :

import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";

//...

export default function ThePage() {
  const markdown = {
    description: "<p>Hello from the other </p>\n<p><strong>side</strong></p>"
  }

  return (
    <>
      <ReactMarkdown children={markdown.description} rehypePlugins={[rehypeRaw]} />
    </>
  );
}