next.js 在react-markdown中呈现HTML的任何方法

xoshrz7s 于 2023-06-22 发布在 React

关注(0)|答案(2)|浏览(201)

我正在使用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} />
    </>
  );
}

next.js

来源：https://stackoverflow.com/questions/70548725/any-way-to-render-html-in-react-markdown

2条答案

按热度按时间

kg7wmglp1#

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

赞(0）回复(0）举报 2023-06-22

vm0i2vca2#

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

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

赞(0）回复(0）举报 2023-06-22

我来回答

next.js 在react-markdown中呈现HTML的任何方法

2条答案

相关问题

热门标签

最新问答