React初心者でも分かる！生のHTMLをレンダリングする方法

2024-04-02

Reactで生のHTMLをレンダリングする方法

dangerouslySetInnerHTMLを使う

これは最も簡単な方法ですが、セキュリティ上のリスクを伴うため、注意が必要です。

const element = <div dangerouslySetInnerHTML={{ __html: htmlString }} />;
ReactDOM.render(element, document.getElementById('root'));

利点:

コードがシンプルで分かりやすい

XSS脆弱性などのセキュリティリスクがある
Reactのコンポーネント内でHTMLを動的に生成できない

セキュリティリスクへの対策:

dangerouslySetInnerHTMLを使用する前に、HTML文字列をサニタイズする
信頼できるソースからのHTMLのみを使用する

ReactDOM.renderToStringを使う

これはサーバーサイドレンダリング (SSR) に適した方法です。

const html = ReactDOM.renderToString(<MyComponent />);

サーバーサイドでHTMLを生成できるので、SEOに有利
dangerouslySetInnerHTMLよりも安全

クライアントサイドでReactコンポーネントのイベント処理ができない

ライブラリを使う

react-html-parserやreact-render-htmlなどのライブラリを使うと、安全かつ簡単に生のHTMLをレンダリングできます。

import ReactHtmlParser from 'react-html-parser';

const element = <ReactHtmlParser html={htmlString} />;
ReactDOM.render(element, document.getElementById('root'));

安全かつ簡単に生のHTMLをレンダリングできる

ライブラリの導入が必要

安全性を重視する場合は、ReactDOM.renderToStringまたはライブラリを使う
シンプルさを重視する場合は、dangerouslySetInnerHTMLを使う (ただし、セキュリティ対策を講じること)

Reactで生のHTMLをレンダリングするには、いくつかの方法があります。それぞれの方法の特徴と利点・欠点を理解した上で、要件に合った方法を選びましょう。

dangerouslySetInnerHTMLを使う

const htmlString = `<h1>タイトル</h1><p>本文</p>`;
const element = <div dangerouslySetInnerHTML={{ __html: htmlString }} />;
ReactDOM.render(element, document.getElementById('root'));

ReactDOM.renderToStringを使う

const MyComponent = () => <h1>タイトル</h1>;
const html = ReactDOM.renderToString(<MyComponent />);

ライブラリを使う (react-html-parser)

import ReactHtmlParser from 'react-html-parser';
const htmlString = `<h1>タイトル</h1><p>本文</p>`;
const element = <ReactHtmlParser html={htmlString} />;
ReactDOM.render(element, document.getElementById('root'));

上記のコードはあくまでサンプルです。実際の使用例に合わせて修正してください。
dangerouslySetInnerHTMLを使用する場合は、セキュリティ対策を講じることを忘れないでください。

コンポーネントとしてラップする

生のHTMLをReactコンポーネントとしてラップすることで、安全かつ簡単にレンダリングできます。

const MyHtmlComponent = ({ html }) => {
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
};

const element = <MyHtmlComponent html={htmlString} />;
ReactDOM.render(element, document.getElementById('root'));

Reactコンポーネントの機能を利用できる

コード量が少し増える

Fragmentを使う

React 16以降では、Fragmentを使って複数の要素をまとめてレンダリングできます。

const element = (
  <React.Fragment>
    <h1>タイトル</h1>
    <p>本文</p>
  </React.Fragment>
);
ReactDOM.render(element, document.getElementById('root'));

コードがシンプルになる

特に無し

カスタムレンダラーを使う

独自のレンダラーを作成することで、より柔軟な方法で生のHTMLをレンダリングできます。

const customRenderer = {
  render(html, container) {
    // 独自のレンダリング処理
  }
};

const element = <MyComponent renderer={customRenderer} />;
ReactDOM.render(element, document.getElementById('root'));