UTILS.
%100 tarayıcıda

HTML'den JSX / React'e

Bir HTML parçacığını React için geçerli JSX'e dönüştürün — öznitelikleri yeniden adlandırarak, void etiketlerini kendiliğinden kapatarak ve satır içi stilleri stil nesnelerine çevirerek.

— çıktı burada görünür —

Bu araç hakkında

HTML'den JSX / React'e dönüştürücü, bir HTML parçacığını tarayıcının yerel DOMParser'ı ile ayrıştırır ve React'in ihtiyaç duyduğu her şeyi düzelterek geçerli JSX olarak yeniden serileştirir. Tamamen istemci tarafında çalışır, böylece yapıştırdığınız işaretleme makinenizde kalır. Herhangi bir HTML yapıştırın — bir tasarım dışa aktarımı, bir e-posta şablonu, bir bileşen taslağı — ve doğrudan bir React dosyasına bırakabileceğiniz JSX alın.

Yeniden yazma, ayrılmış öznitelikleri yeniden adlandırır (class className olur, for htmlFor olur), geri kalanı camelCase yapar — tabindex tabIndex'e, maxlength maxLength'e, stroke-width strokeWidth'e — data-* ve aria-* özniteliklerine dokunmadan. img, br, input ve hr gibi void öğeleri kendiliğinden kapanır hale getirilir (<img />), HTML yorumları {/* ... */} olur, metindeki değişmez süslü parantezler {'{'} olarak kaçışlanır ve satır içi bir style="a:b;c:d" dizesi camelCase CSS anahtarlarıyla bir style={{ a: 'b', c: 'd' }} nesnesine dönüştürülür. disabled gibi boole öznitelikleri, bir geçişle çıplak veya ={true} olarak üretilebilir.

Fragment çıktısını seçin — birden çok kök düğüm otomatik olarak bir <>...</> fragment'ında sarılır — veya JSX'i, seçtiğiniz ad ve girintiyle (2 boşluk, 4 boşluk veya sekme) bir export default function içinde saran tam bileşen çıktısını seçin. Sonuç yapıştırmaya hazırdır; ayrıştırma gerçek bir DOM kullandığı için hatalı iç içe geçmeler, bir tarayıcının yapacağı gibi normalleştirilir.

Sık sorulan sorular

Hangi öznitelikler yeniden adlandırılır?
class className olur ve for htmlFor olur; diğer tireli veya ayrılmış öznitelikler camelCase yapılır (tabindex tabIndex'e, maxlength maxLength'e, stroke-width strokeWidth'e). data-* ve aria-* öznitelikleri yazıldığı gibi tam olarak korunur.
Satır içi stiller nasıl işlenir?
Bir style="color:red;font-size:14px" dizesi style={{ color: 'red', fontSize: '14px' }} olur — her CSS özelliği camelCase yapılır ve her değer bir dize olarak üretilir; bu, React satır içi stilleri için her zaman geçerlidir.
Birden çok kök öğede ne olur?
JSX tek bir kök gerektirir, bu nedenle parçacığınızda birkaç üst düzey düğüm olduğunda bunlar bir Fragment (<>...</>) içinde sarılır. Tam bileşen modu bunun yerine döndürülen parantezli bir ifade içine sarar.
Yorumları ve void etiketlerini dönüştürür mü?
Evet. HTML yorumları JSX yorumları {/* ... */} olur ve void öğeleri (img, br, input, hr, meta, link ve geri kalanı) JSX'in gerektirdiği gibi <img /> olarak kendiliğinden kapanır hale getirilir.

Daha fazla araç