Softonic

HTML'den JSX'e Dönüştürücü

Adım 1 / 2

Dönüştürür: class to className, for to htmlFor, inline styles to JSX nesneleri, boş etiketleri self-closing yapar, HTML yorumlarını kaldırır.

JSX’e dönüştür

JSX, HTML gibi görünür ama aslında değildir: class yerine className, for yerine htmlFor, style bir dize değil bir nesnedir ve her boş etiket kendini kapatmalıdır. HTML’i yapıştırın; bu dönüştürücü ilk denemede derlenen JSX üretir, böylece bir pazarlama sayfasını React bileşenine taşırken on dakikanızı derleyici hatalarının peşinde harcamazsınız.

HTML'i JSX'e dönüştürme

  1. 1

    HTML'yi yapıştırın

    Bir bileşenlik işaretleme veya sayfanın tamamına yakın bir parça.

  2. 2

    Dönüştürün

    Araç; `class`, `for`, `readonly` gibi öznitelikleri JSX yazımına çevirir ve satır içi stilleri nesnelere dönüştürür.

  3. 3

    JSX'i gözden geçirin

    Çıktı, bir `.jsx` veya `.tsx` dosyasına yapıştırılmaya hazırdır.

  4. 4

    Kopyalayın ve yapıştırın

    Kod tek satırlık ifadeler kullandığından mevcut bir bileşenin içine rahatça oturur.

HTML ile JSX arasındaki önemli farklar

JSX, HTML değildir. React.createElement() çağrılarına derlenen bir JavaScript ifadesidir; bu yüzden öznitelik adları JavaScript kurallarına uyar.

Dönüştürücü en yaygın yeniden adlandırmaları otomatik yapar. Aşağıdaki tam liste, JSX’i elle yazarken ihtiyacınız olan referanstır.

Öznitelik yeniden adlandırmaları

HTML JSX Notlar
class className class JS’te ayrılmıştır
for htmlFor for ayrılmıştır
tabindex tabIndex camelCase
readonly readOnly camelCase
contenteditable contentEditable camelCase
stroke-width (SVG) strokeWidth camelCase
xlink:href xlinkHref İki noktalı ad alanları düzleştirilir
aria-label aria-label ARIA tireleri korur
data-* data-* Veri öznitelikleri tireleri korur

style özniteliği

HTML: style="color: red; padding: 10px"

JSX: style={{ color: 'red', padding: 10 }}

Birimi olmayan sayısal değerler piksel olur; yüzdeler ve flex gibi birimi olmayan değerler için dizeleri koruyun.

Kendini kapatan boş öğeler

HTML, kapanış etiketi olmadan <br> ve <input> yazılmasına izin verir. JSX ise <br /> ve <input /> ister; her öğe açıkça kapatılmalıdır.

Yorumlar

HTML yorumları (<!-- -->) JSX gövdesinde geçerli değildir. Bu dönüştürücü onları kaldırır; bir not tutmak istiyorsanız {/* JavaScript blok yorumu */} olarak kendiniz yazın.

Boole öznitelikleri

HTML: <input checked> (veya <input checked="checked">)

JSX: <input checked={true} /> veya kısaca <input checked />. “true” dizesini asla iletmeyin.

Kaçış yolları

  • Güvenilmeyen HTML parçaları dangerouslySetInnerHTML={{ __html: ... }} ile işlenebilir; kullanımı caydırmak için kasıtlı olarak çirkin bırakılmıştır.
  • Özel data-* öznitelikleri olduğu gibi kalır; standart olmayan öznitelikler iletilir ancak geliştirme modunda React uyarıları tetikleyebilir.

Sık Sorulan Sorular

stroke-width gibi SVG öznitelikleri JSX’te camelCase (strokeWidth) olarak yazılmalı ve her etiket kendini kapatmalıdır. Dönüştürücü SVG içindeki void etiketlerini kendiliğinden kapatır ve stil dizelerindeki özellik adlarını camelCase’e çevirir, ancak SVG özniteliklerini yeniden adlandırmaz; stroke-width değerini elle strokeWidth yapın. Tek seferlik simgeler için en temiz yaklaşım, simgeyi SVG dosyası olarak kaydedip svgr üzerinden bileşen olarak içe aktarmaktır.

Evet, hem JSX hem TSX className kullanır. Tek istisna dangerouslySetInnerHTML içidir; ham HTML dizesi, DOM’a aynen eklendiği için class olarak kalır.

Hayır. Çıktı yalnızca JSX parçasıdır; export default function sarmalayıcısı ve tür ek açıklamaları yoktur. Bunu .jsx veya .tsx dosyanıza yapıştırın ve props, türler ile sarmalayıcıyı kendiniz ekleyin. class yine de className olarak dönüştürülür ve TSX tam olarak bunu bekler.

Değiştirilmeden aynen geçirilir. Dönüştürücü olay işleyicilerini yeniden adlandırmaz, bu yüzden onclick değerini onClick yapın ve dize değerini gerçek bir işlevle değiştirin, örneğin onClick={() => doThing()}. doThing işlevini bileşen kapsamında tanımlamanız gerekir.

İlgili Araçlar

ASCII Tablosu Referansı

NUL, LF ve DEL dahil her kod için ondalık, onaltılık, sekizlik ve ikili değerlerle HTML sayısal karakter başvurusu gösterimini sunan tam ASCII tablosu.

HTML Karakter Referansı

HTML varlıklarının aranabilir listesi; adlandırılmış ve sayısal kodlarıyla birlikte özel karakter ve semboller için tek tıkla kopyalama.

Klavye kısayolları başvurusu

macOS, Windows ve Linux’ta VS Code, Chrome ve GNU Readline kullanan Bash için belgelenmiş varsayılan kısayolları arayın.

EditorConfig Oluşturucu

Girinti stili ve boyutu, satır sonu, karakter kümesi ve boşluk kurallarınızla bir .editorconfig dosyası oluşturarak IDE ve editörler arasında tutarlı biçimlendirme sağlayın.

E-posta Doğrulayıcı

Bir e-posta adresini doğrulayın: RFC 5322 sözdizimi kontrolü, canlı MX kaydı sorgulama, ayrıca yerel kısım, alan adı ve uzunluk bilgileri. Hiçbir e-posta gönderilmez.

Gradyan Duvar Kağıdı Oluşturucu

Dizüstü bilgisayar, telefon veya Zoom arka planları için bulanık üç renkli gradyan duvar kağıtları oluşturun. Açıyı ve bulanıklığı rastgele belirleyin ya da elle ayarlayın.

Araç diğer dillerde mevcuttur