[React][TypeScript]生のhtmlを返す

npm install dompurify

 

import DOMPurify from "dompurify";

const App= () => {
    const rawHtml = `
    <div>
      <h1 style="color: blue;">Hello, World!</h1>
      <p>これは複数行のHTMLです。</p>
      <ul>
        <li>リスト1</li>
        <li>リスト2</li>
      </ul>
    </div>
    `;
    const cleanHtml = DOMPurify.sanitize(rawHtml); //安全なhtmlへ変換
    return <div dangerouslySetInnerHTML={{ __html: cleanHtml }} />;
};

export default App;

 
dangerouslySetInnerHTMLを使う場合Fragment (<> </>) は使えない