貼った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文字です。