HTML → JSX

HTML を React の JSX に変換します。class を className に、インラインスタイルをオブジェクトに、自己終了タグとコメントも変換し、コンポーネントで包むこともできます。

このツールについて

HTML を React の JSX に変換します。属性名が変わり (class → className、for → htmlFor)、インラインスタイルはオブジェクトに、空要素は自己終了タグに、コメントは JSX コメントになります。

使い方

  1. HTML を貼り付けます。
  2. 必要に応じて「コンポーネントで包む」をオンにします。
  3. JSX を React のコードにコピーします。

よくある質問

ルート要素が複数ある場合はどうなりますか?

フラグメント <>…</> で包まれるので、結果は有効な JSX になります。

イベントハンドラーは変換されますか?

onclick は onClick になりますが、値は文字列のままです。コンポーネント内で関数に置き換えてください。

テキスト中の波かっこはどう扱われますか?

JSX が式として扱わないよう、{'{'} と {'}'} にエスケープされます。

関連ツール