貼ったHTMLをReactに入れられるJSXに変換する

classはclassNameに、forはhtmlForに、style文字列はオブジェクトに — マークアップ移植の機械的な部分を一括で処理します。

このガイドで使う道具

やりたいこと

デザインの受け渡し、テンプレートエンジンの断片、コンポーネントへ移植する静的ページ — マークアップは正しいのに、Reactはclass・style文字列・閉じられていない<img>・HTMLコメントを拒否します。それぞれ1つの正規表現で直せますが、必ず十数箇所あります。

貼ってコピー

HTMLフラグメントを貼って、変換後のJSXをコピーします。属性名・インラインスタイル・コメントが書き換えられ、void要素は自己閉鎖されます。

  • <!-- コメント -->は{/* コメント */}になります — 内部のネストしたコメント構文は正規化され、JSXがパース可能に保たれます。
  • イベント属性(onclick=等)はそのまま残さずフラグします — 文字列ハンドラはJSXではないので、実際のpropsに自分で接続してください。

やらないこと

出力は構文的に正しいJSXですがコンポーネント設計ではありません — マークアップの分割やprop型の選択はしません。テンプレートのプレースホルダ({{ var }}、{% tags %})はHTMLではないため書き換えられません。上限は1回500,000文字です。