HTMLをJSXに変換

HTMLをJSXに変換: 用途

HTMLを貼り付けると、その場で変換されます。class と for は className と htmlFor に、tabindex、maxlength、autocomplete などの属性はキャメルケースに、style はオブジェクトに変わり、真偽値の属性は値なしになり、空タグにはスラッシュが付き、コメントは {/* */} になります。インラインイベントは、元のコードをコメントとして残した関数になります。

data- と aria- の属性はそのまま残り、SVGの属性も変換されます。コンポーネントを生成にチェックを入れると、選んだ名前の完成した関数が得られます。

使い方

1. HTMLを貼り付けます。
2. 完成した関数が必要なら、コンポーネントを生成にチェックを入れます。
3. JSXをReactプロジェクトにコピーします。

使うタイミング

• HTMLのテンプレートをReactやNext.jsのプロジェクトに移す。
• SVGアイコンをコンポーネントに変換する。
• 他のサイトからコピーしたコードを適応させる。

よくある質問

HTMLからJSXで何が変わりますか？

class は className に、for は htmlFor になります。ハイフンを含む属性やイベント属性はキャメルケースになり（tabindex は tabIndex、onclick は onClick）、style はオブジェクト（{{ marginTop: 8 }}）になります。閉じない タグ（img、br、input）にはスラッシュが付き、コメントは {/* */} になります。

data- と aria- の属性は変わりますか？

いいえ。data-* と aria-* は、JSXでもハイフン付きのまま変わりません。

onclickの中のJavaScriptはどうなりますか？

Reactではイベントに関数を渡すため、インラインイベントの内容はコメントに変換されます。その処理をコンポーネントの関数として書き直してください。

SVGにも対応していますか？

はい。stroke-width、fill-rule、xlink:href などのSVG属性は、strokeWidth、fillRule、xlinkHref になります。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール