İçeriğe geç
Dönüştürme araçları

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

HTML işaretlemesini htmltojsx ile React JSX'e dönüştürür: class, className; for, htmlFor olur. Satır içi stiller stil nesnelerine dönüşür ve boş etiketler kendiliğinden kapatılır. Birden fazla kök öğe bir fragment içine alınır.

Statik bir HTML şablonunu veya formunu React bileşenine taşımak.

HTML

JSX

Ne zaman kullanılır?

  • Statik bir HTML şablonunu veya formunu React bileşenine taşımak.
  • Belgelerdeki veya bir arayüz kitindeki işaretleme parçasını bileşene yapıştırılabilecek JSX'e dönüştürmek.

Nasıl kullanılır?

  1. HTML'yi soldaki düzenleyiciye yapıştırın.
  2. İsterseniz ayarları açıp İşlev bileşeni oluştur seçeneğini etkinleştirerek çıktıyı export const Foo = () => (...) içine alın.
  3. JSX'i kopyalayın, bileşeni yeniden adlandırın ve satır içi olay özniteliklerini React işleyicileriyle değiştirin.

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 */}
</>

Ayrıntılar ve sınırlamalar

Dönüştürme tarayıcıda yapılır ve çıktı Prettier ile biçimlendirilir (noktalı virgül kullanılmaz).

onclick="go()" gibi satır içi olay öznitelikleri olduğu gibi korunur; onClick işleyicilerine dönüştürülmez.

Mantıksal özniteliklere boş dize atanır; örneğin disabled="". React, "" değerini false kabul eder; bu yüzden disabled veya disabled={true} olarak değiştirin.

Girdi SVG ise sayfa, SVG → JSX aracına yönlendiren bir ipucu gösterir.

FAQ

Satır içi stiller nasıl dönüştürülür?

Stil dizesi camelCase anahtarları olan bir nesneye ayrıştırılır ve piksel değerleri sayıya dönüşür: style="margin-top: 4px", style={{ marginTop: 4 }} olur.

HTML yorumlarına ne olur?

JSX yorumları olarak korunurlar; örneğin <!-- hint -->, {/* hint */} olur.

Oluşturulan bileşeni adlandırabilir miyim?

Hayır. İşlev seçeneği her zaman Foo adını kullanır. Kopyaladıktan sonra yeniden adlandırın.

Teknik özellikler ve kaynaklar