React

html-react-parserは何をしてくれる？ 「文字列のHTML」→「Reactで描画できる要素（JSX構造）」にしてくれるライブラリです const sample = parse(&quot;&lt;p&gt;Hello &lt;b&gt;world&lt;/b&gt;&lt;/p&gt;&quot;) ↓Hello world https://www.npmjs.com/package/html-react-parser 一般的な具体例は サーバーやCMSから取得したHTMLをそのままReactで表示したいとき例：WordPressやHeadless CMSから受け取った記事本文をReactアプリ内に埋め込みたい場合。 dangerouslySetInnerHTMLを避けて安全にHTMLを扱いたいとき→ html-react-parser はタグや属性をフィルタリングでき、XSS対策をしやすい。 parse()関数の第2引数にオプションを設定できます replace 特定のHTML要素を別のReactコンポーネントに置き換えるときに使います 例 import parse from &quot;html-react-parser&quot;; const html = &#39;&lt;img src=&quot;test.jpg&quot; alt=&quot;test&quot;&gt;&#39;; const content = parse(html, { replace: (domNode) =&gt; { if (domNode.name === &quot;img&quot;) { return &lt;MyCustomImage {...domNode.attribs} /&gt;; } }, }); 補助関数のdomToReact()は何してる？ parse() は全体を自動でReact化しますが、replace() で加工する場合はdomToReact()で部分的にReact化します。 理由はreplace() を使うと「置き換え対象の中身」は自動でReact化されなくなるからです。 （補足）parse() は内部で次の2段階を自動で行っています HTML文字列 → DOMノード構造にパース DOMノード構造 → React要素（JSX相当）に変換 関数目的対象parse()HTML文字列全体をReact要素に変換する全体domToReact()すでにパース済みのDOMノードをReact要素に変換する一部（特定の子ノードなど） Element HTMLを構成する1つの要素（タグ）を表すオブジェクト プロパティ内容type"tag"（タグ要素）や "text"（テキスト）などnameタグ名（例："p", "div", "img"）attribs属性オブジェクト（例：{ class: "title" }）children子ノード配列（中の要素やテキスト）

React

状態管理でReact QueryとJotai

html-react-parser使い方