İçeriğe atla
TextArray1.41.0
%100 yerel

HTML'den JSX'ye dönüştürücü

HTML işaretlemesini JSX'e dönüştürün ve doğrudan bir React bileşenine yapıştırabilirsiniz.

Giriş
Çıkış
İlgili araçlar
HTML biçimlendiriciGeliştirici araçları
CSS'den JS'ye nesne dönüştürücüGeliştirici araçları
HTML'den BBCode'ye dönüştürücüGeliştirici araçları
Markdown formatını kaldırMetin temizleme
i18n anahtar farkıGeliştirici araçları
TOML'den JSON'ye dönüştürücüGeliştirici araçları
HTML'den JSX'ye dönüştürücü
HTML işaretlemesini yapıştırın ve JSX'i doğrudan bir React bileşenine bırakabilirsiniz. Dönüştürücü, React'ın farklı bir ad beklediği her özelliği yeniden adlandırır - class className olur, for htmlFor olur, tabindex tabIndex olur, colspan colSpan olur ve daha onlarcası - böylece bir tasarım aracından, bir CMS dışa aktarımından, bir e-posta şablonundan veya eski bir statik sayfadan kopyalanan bir pasajı yapıştırdığınız anda konsol bilinmeyen DOM özellikleri hakkında uyarıyı durdurur.
Satır içi stiller, React'in düz dize olarak reddettiği bir sonraki şeydir. "Stil'i nesneye dönüştür" seçeneğini etkinleştirdiğinizde, style={{ color: 'red', fontSize: '16px' }} olur ve her özellik camelCased ile alıntılanmış her değer stil desteği için hazır olur. Void öğeleri üçüncü yakalamadır: HTML, <br>, <img>, <input>, <hr> ve <meta>'yi kapatmadan bırakmanıza izin verir, ancak JSX bunları ayrıştırmaz, dolayısıyla "Kendiliğinden kapanan geçersiz öğeler" bunları sizin için <br />, <img /> vb. olarak yeniden yazar.
HTML yorumları, JSX'in işaretleme içinde kabul ettiği tek yorum formuna dönüşür, böylece <!-- bunun gibi -->, {/* şunun gibi */} olur. Metin içeriği, boşluklar ve satır sonları tam olarak yazdığınız gibi kalır, böylece girintiniz ve kopyanız dönüştürme işleminde bozulmadan kalır ve JSX bunları oldukları gibi koruduğu için data-* ve aria-* nitelikleri kasıtlı olarak tireli bırakılır. Her iki seçenek de varsayılan olarak açıktır ve yalnızca özniteliğin yeniden adlandırılmasını istediğinizde kapatılabilir.
Dönüşümün tamamı tarayıcınızda düz dize işleme olarak gerçekleşir; DOM yok, sunucu yok, yükleme yok. Dahili bir yönetici panelinden veya istemci sitesinden özel işaretlemeyi yapıştırın ve cihazınızdan hiçbir şey çıkmayın. JSX'i kopyalayın, dosya olarak indirin veya bir sonraki adım için başka bir TextArray aracına gönderin.
FAQ
Hangi nitelikleri yeniden adlandırıyor?
class → className, for → htmlFor ve camelCase formları React'ın beklediği şeyler: tabIndex, readOnly, maxLength, colSpan, rowSpan, cellPadding, crossOrigin, autoFocus, contentEditable, srcSet ve çok daha fazlası. data-* ve aria-* nitelikleri tam olarak oldukları gibi bırakılır çünkü JSX bunları tireli olarak tutar.
Satır içi stilleri dönüştürüyor mu?
Evet, "Stilleri nesneye dönüştür" açıkken. Her bildirim, çift ayraç stili nesnenin içinde alıntılanan dize değerine sahip bir camelCased anahtarına dönüşür. Stil dizelerinize dokunulmadan bırakmak için seçeneği kapatın.
Bu tam bir HTML ayrıştırıcısı mı?
Hayır — bu bir tarayıcı DOM'si değil, hızlı bir dize dönüşümüdür. React'in gerçekten ihtiyaç duyduğu dönüşümleri kapsar: öznitelik yeniden adlandırmaları, satır içi stiller, geçersiz öğeler ve yorumlar. HTML'nizi yeniden girintilemez veya doğrulamaz, dolayısıyla hatalı biçimlendirilmiş etiketler yazıldığı gibi görünür.
HTML'im herhangi bir yere yüklendi mi?
Hayır. Dönüşüm tamamen tarayıcınızda yerel dize işlemeyle çalışır. İşaretlemeniz hiçbir zaman bir sunucuya ulaşmaz, dolayısıyla dahili veya istemci kodunu yapıştırmak güvenlidir.