Reactで文字列をHTMLとしてレンダリングする方法

1. dangerouslySetInnerHTMLを使用する方法: ReactのdangerouslySetInnerHTMLプロパティを使用すると、文字列を直接HTMLとしてレンダリングできます。ただし、この方法はセキュリティリスクを伴うため、信頼できるソースからのみ文字列を使用する必要があります。

import React from 'react';
function MyComponent() {
  const htmlString = '<div>Hello, <strong>React</strong>!</div>';
  return <div dangerouslySetInnerHTML={{ __html: htmlString }} />;
}

2. DOMパースを使用する方法: 別の方法として、DOMパースを使用して文字列をHTML要素に変換し、Reactのコンポーネントとしてレンダリングすることができます。

import React from 'react';
function MyComponent() {
  const htmlString = '<div>Hello, <strong>React</strong>!</div>';
  const parser = new DOMParser();
  const parsedHtml = parser.parseFromString(htmlString, 'text/html');
  const body = parsedHtml.body;
  return <div>{Array.from(body.childNodes)}</div>;
}

3. サードパーティライブラリを使用する方法: Reactには、HTMLを扱うためのサードパーティライブラリもあります。例えば、react-html-parserはHTML文字列をReact要素に変換するための便利なツールです。

まず、react-html-parserをインストールします。

npm install react-html-parser

次に、以下のようにライブラリを使用してHTML文字列をレンダリングします。

import React from 'react';
import ReactHtmlParser from 'react-html-parser';
function MyComponent() {
  const htmlString = '<div>Hello, <strong>React</strong>!</div>';
  const parsedHtml = ReactHtmlParser(htmlString);
  return <div>{parsedHtml}</div>;
}

これらの方法を使用すると、Reactで文字列をHTMLとしてレンダリングすることができます。ただし、セキュリティに注意しながら、適切な方法を選択してください。