Lewati ke konten
Alat konversi

Konverter HTML ke React JSX

Mengonversi markup HTML ke React JSX dengan htmltojsx: class menjadi className, for menjadi htmlFor, gaya inline menjadi objek style, dan tag kosong ditutup sendiri. Beberapa elemen akar dibungkus dalam fragmen.

Memindahkan templat HTML statis atau formulir ke komponen React.

HTML

JSX

Kapan menggunakannya

  • Memindahkan templat HTML statis atau formulir ke komponen React.
  • Mengonversi cuplikan markup dari dokumentasi atau kit UI menjadi JSX yang dapat ditempelkan ke komponen.

Cara penggunaan

  1. Tempelkan HTML ke editor kiri.
  2. Jika perlu, buka pengaturan dan aktifkan Buat komponen fungsi untuk membungkus hasil dalam export const Foo = () => (...).
  3. Salin JSX, ganti nama komponen, dan ganti atribut peristiwa inline dengan handler React.

HTML

<label class="field" for="email">Email</label>
<input id="email" type="email" tabindex="1" style="margin-top: 4px; font-size: 14px" disabled>
<!-- hint -->

JSX

<>
  <label className="field" htmlFor="email">
    Email
  </label>
  <input
    id="email"
    type="email"
    tabIndex={1}
    style={{ marginTop: 4, fontSize: 14 }}
    disabled=""
  />
  {/* hint */}
</>

Detail dan batasan

Konversi berjalan di browser dan hasilnya diformat dengan Prettier (tanpa titik koma).

Atribut peristiwa inline seperti onclick="go()" dipertahankan apa adanya, bukan dikonversi menjadi handler onClick.

Atribut boolean diberi string kosong, misalnya disabled="". React menganggap "" sebagai false, jadi ubah menjadi disabled atau disabled={true}.

Jika masukannya SVG, halaman menampilkan petunjuk ke SVG ke JSX.

FAQ

Bagaimana gaya inline dikonversi?

String style diurai menjadi objek dengan kunci camelCase, dan nilai piksel menjadi angka: style="margin-top: 4px" menjadi style={{ marginTop: 4 }}.

Apa yang terjadi pada komentar HTML?

Komentar dipertahankan sebagai komentar JSX, misalnya <!-- hint --> menjadi {/* hint */}.

Bisakah saya memberi nama komponen yang dihasilkan?

Tidak. Opsi fungsi selalu menggunakan nama Foo. Ganti namanya setelah menyalin.

Spesifikasi dan referensi