html文字列をReactElementに変換する

やりたいこと

html文字列をReactElementに変換する．

例えば，"<img src='sample.png'>"という文字列をアプリ上で入力すると画像が表示されるなど．

方法

react-html-parserというライブラリを使う．

実装例

"<img src='sample.png'>"という文字列をReactElementに変換して表示する例

index.tsx

import React from "react";
import ReactHtmlParser from "react-html-parser";

const Index: React.VFC = () => {
  const imgHtml = "<img src='sample.png'>";
  return (
    <div>
      {ReactHtmlParser(imgHtml)}
    </div>
  );
};

export default Index;

文字列をtextareaに入力し，ReactElementに変換して表示する例（TypeScript）

index.tsx

import React, { useState } from "react";
import ReactHtmlParser from "react-html-parser";

const Index: React.VFC = () => {
  const [html, setHtml] = useState<string>("");

  return (
    <>
      <div>
        {ReactHtmlParser(html)}
      </div>
      <textarea onChange={(e) => setSlide(e.target.value)} />
    </>
  );
};

export default Index;