Closed2021/01/07にクローズ2

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

React

JSX

yuucu

どうしても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;

yuucu

htmlの整形が必要であれば以下プラグイン導入
https://www.npmjs.com/package/pretty

var pretty = require('pretty');
 
pretty(STRING_OF_HTML);

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