React DOM Bileşenleri

React tarayıcının tüm yerleşik HTML ve SVG bileşenlerini destekler.


Ortak Bileşenler

Tüm yerleşik tarayıcı bileşenleri bazı prop’ları ve event’leri destekler.

Bu ref ve dangerouslySetInnerHTML gibi React’e özgü prop’ları içerir.


Form bileşenleri

Aşağıdaki yerleşik tarayıcı bileşenleri kullanıcı girdilerini alır:

React’te bu elemanlar kendilerine value prop’u iletildiğinde kontrol edilebilir hale geldikleri için özel bir yere sahiptirler.


Kaynak ve Metadata Bileşenleri

Bu yerleşik tarayıcı bileşenleri, harici kaynakları yüklemenizi ya da sayfanıza meta verilerle açıklamalar eklemenizi sağlar.

They are special in React because React can render them into the document head, suspend while resources are loading, and enact other behaviors that are described on the reference page for each specific component.


Tüm HTML bileşenleri

React tüm yerleşik tarayıcı HTML bileşenlerini destekler. Bu şunları içerir:

Not

DOM standardıyla benzer şekilde, React prop isimleri için camelCase kuralını kullanır. Örneğin tabindex yerine tabIndex yazacaksınız. Mevcut HTML’inizi JSX’e dönüştürmek için bir çevrimiçi dönüştürücü kullanabilirsiniz.


Özel HTML elemanları

Eğer <my-element> gibi tire içeren bir etiket oluşturursanız, React bir özel HTML elemanı oluşturmak istediğinizi varsayacaktır. React’te özel elemanların render edilmesi, yerleşik tarayıcı etiketlerinin render edilmesinden daha farklı şekilde çalışır:

  • Tüm özel eleman prop’ları string olarak serileştirilir ve her zaman öznitelikler kullanılarak ayarlanır.
  • Özel elemanlar class yerine className, for yerine htmlFor kabul eder.

Yerleşik bir tarayıcı HTML elemanını is özniteliğiyle oluşturursanız, bu eleman da özel bir eleman olarak ele alınacaktır.

Not

React’in gelecekteki bir sürümü daha kapsamlı özel eleman desteği içerecektir.

En son deneysel sürüme React paketlerini yükselterek deneyebilirsiniz:

  • react@experimental
  • react-dom@experimental

React’in deneysel sürümleri hatalar içerebilir. Bunları canlı ortamda kullanmayın.


Tüm SVG bileşenleri

React, tüm yerleşik tarayıcı SVG bileşenlerini destekler. Bu şunları içerir:

Not

DOM standardına benzer şekilde, React prop adları için camelCase kuralını kullanır. Örneğin, tabindex yerine tabIndex yazacaksınız. Mevcut SVG’nizi JSX’e dönüştürmek için bir çevrimiçi dönüştürücü kullanabilirsiniz.

  • xlink:actuate becomes xlinkActuate.
  • xlink:arcrole becomes xlinkArcrole.
  • xlink:href becomes xlinkHref.
  • xlink:role becomes xlinkRole.
  • xlink:show becomes xlinkShow.
  • xlink:title becomes xlinkTitle.
  • xlink:type becomes xlinkType.
  • xml:base becomes xmlBase.
  • xml:lang becomes xmlLang.
  • xml:space becomes xmlSpace.
  • xmlns:xlink becomes xmlnsXlink.