Penukar HTML ke JSX
Penukar HTML ke JSX percuma dalam talian. Tampal HTML anda dan terima JSX React yang bersih dengan className, htmlFor, gaya camelCase, tag tertutup sendiri dan komen selamat, semuanya dalam pelayar.
Apakah yang dilakukan penukar HTML ke JSX?
Ia menukar markup HTML biasa kepada JSX yang boleh dirender React. Tampal HTML anda di kawasan input, dan JSX setara muncul di panel output, dikemas kini semasa anda menaip dengan debounce singkat.
Atribut manakah yang ditukar nama?
class menjadi className, for menjadi htmlFor, tabindex menjadi tabIndex, dan atribut berhubung lain seperti maxlength, colspan atau stroke-width ditukar kepada nama camelCase React. Atribut data-* dan aria-* kekal seperti asal.
Bagaimana atribut style ditukar?
Rentetan CSS seperti style="background-color: red; font-size: 12px" menjadi objek JavaScript: style={{backgroundColor:'red', fontSize:'12px'}}. Setiap sifat CSS ditulis dalam camelCase dan nilainya dibalut tanda petik.
Bagaimana elemen void dikendalikan?
Elemen yang tidak boleh mempunyai anak — img, br, input, hr, meta, link dan lain-lain — dinormalkan kepada sintaks tertutup sendiri: <img> menjadi <img />, seperti yang dikehendaki JSX. Div dan span kosong turut ditutup begitu.
Apa yang berlaku kepada komen HTML?
Komen ditukar kepada komen JSX: <!-- note --> menjadi {/* note */}. Sebarang jujukan yang boleh menamatkan komen lebih awal dineutralkan supaya kod yang dijana sentiasa boleh disusun.
Bagaimana entiti dan aksara khas dirawat?
Entiti seperti & atau © dinyahkod kepada aksara sebenar, kemudian kurungan kerinting dan sudut di-escape semula dalam bentuk selamat untuk JSX, jadi teks mengandungi { } atau < dipaparkan betul tanpa merosakkan komponen.
Apa fungsi pilihan komponen fungsi?
Ia membungkus markup yang ditukar dengan templat sedia guna: function Component() { return ( ...JSX anda... ) } dan bukannya JSX mentah. Aktifkan apabila mahu menampal coretan terus ke fail React.
Adakah HTML saya dimuat naik ke mana-mana?
Tidak. Penghuraian berlaku sepenuhnya dalam pelayar anda menggunakan DOMParser terbina dalam. Tiada apa-apa dihantar ke pelayan, jadi markup peribadi selamat ditukar, dan alat ini turut berfungsi luar talian.
Cara Menggunakan Penukar HTML ke JSX
Tukar HTML biasa kepada React JSX sedia guna tanpa keluar dari pelayar. Semuanya dihurai secara setempat dengan DOMParser terbina dalam — penanda anda tidak pernah dimuat naik.
- Tampal HTML anda ke dalam editor kiri; hasil JSX muncul di kanan dan disegarkan semasa anda menaip (debounce 300 ms).
- Pilih lebar inden dalam "Indentasi" — 2 atau 4 ruang setiap peringkat bersarang.
- Aktifkan "Komponen fungsi" untuk membungkus output dalam function Component() { return ( ... ) }, sedia ditampal ke dalam fail React.
- Gunakan Salin untuk mengambil hasil, Contoh untuk memuatkan sampel, atau Kosongkan untuk memula semula.
class, for dan tabindex menjadi className, htmlFor dan tabIndex, rentetan style menjadi objek camelCase, dan elemen kosong seperti img atau br dikeluarkan sebagai penutup sendiri — tepat seperti yang dijangkakan JSX.
Alat Berkaitan
- Pengindah HTML Format dan indahkan kod HTML serta-merta. Tukar HTML minit kepada kod bersih dan mudah dibaca. Alat dalam talian percuma, tanpa pendaftaran.
- Kod ke Imej Tukar snippet kod kepada imej yang boleh dikongsi dengan penyorotan sintaks, tema tersuai dan hiasan tetingkap. 100% privasi, semuanya dalam pelayar anda.
- Pemeriksa Hash Kira dan sahkan hash MD5, SHA-1, SHA-256, SHA-512 secara tempatan
- Kalkulator Chmod Kalkulator chmod dalam talian percuma untuk mengvisualisasikan dan mengira keizinan fail Linux dengan kotak tanda. Tukar serta-merta antara notasi angka (755, 644) dan simbolik (rwxr-xr-x). Menyokong keizinan khas seperti setuid, setgid, sticky bit.
- Jadual ASCII Rujukan pengkodan aksara ASCII lengkap dengan kod perpuluhan, heksadesimal, oktal, binari, entiti HTML dan penerangan aksara. Cari dan tapis serta-merta.
- Pemapar Hex Lihat kandungan fail dalam format hex dump dengan carian, navigasi offset dan penatalan maya
- Carian Jenis MIME Cari jenis MIME mengikut sambungan fail atau cari sambungan mengikut jenis MIME serta-merta. Rujukan dalam talian percuma dengan 1000+ entri.
- Pemeriksa Resolusi Skrin Kesan resolusi skrin, saiz viewport, DPI dan kedalaman warna secara masa nyata.