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

Question

I am using tinymce to accept markdown data from user. The output data is html. I want to display that data on a page. I am using react-markdown for it. I can see data on page but it's HTML tags. Is there any way to show HTML page not tags?

 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

Yes you can use react-render-markup see example:

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

Answer 2

yes you can;

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

use it like this

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

Answer 3

The ReactMarkdown component is for rendering mark down , not HTML mark up . Given HTML input it just escapes it, and that's why you see it as "source", not formatted text.

If you need to use it with HTML you need to apply a plugin, such as 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]} />
    </>
  );
}