Zenn
Closed2

Reactのjsxを素のhtmlに変換する

React
#
JSX
yuucuyuucu

どうしてもdangerouslySetInnerHTMLに素のhtmlを突っ込む必要があったため調べました。

ReactDOMServer.renderToStaticMarkup 便利

まとめ

import ReactDOMServer from 'react-dom/server';

function jsxToHtml(jsx: React.ReactElement): string {
  return ReactDOMServer.renderToStaticMarkup(jsx);
}

メモ

テスト用のreactプロジェクト作成

npx create-react-app react-ts-app --template typescript
App.tsx

import React from 'react';
import './App.css';
import ReactDOMServer from 'react-dom/server';

function jsxToHtml(jsx: React.ReactElement): string {
  return ReactDOMServer.renderToStaticMarkup(jsx);
}

function App() {

  let testVal = "hello"
  let testJsx = (
    <div className="test">
      <ul>
        <li>test1</li>
        <li>test2</li>
        <li>{testVal}</li>
      </ul>
    </div>
  )

  let resultHtml = jsxToHtml(testJsx);

  return (
    <div className="App">
      <div>
        <pre>
          { resultHtml }
        </pre>
        <div dangerouslySetInnerHTML={{ __html: resultHtml }} />
      </div>
    </div>
  );
}

export default App;

画面

このスクラップは2021/01/07にクローズされました