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

Question

我正在使用 tinymce 接受来自用户的降价数据。输出数据为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

是的，您可以使用 react-render-markup 参见示例：

import { Markup } from "react-render-markup";
 export default function App(){
 return(<Markup markup={markdown.description} />)
 }

Answer 2

是的，你可以；

const [html, setHtml] = useState("<p>Hello from the other </p>\n<p><strong>side</strong></p>");

这样使用

  <div
    dangerouslySetInnerHTML={{
      __html: html,
    }}
 
  ></div>

Answer 3

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

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

Any way to render HTML in react-markdown

markdown

tinymce

reactjs

next.js