API Referansı

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ı

<my-element> gibi bir tire ile bir etiket oluşturursanız, React özel HTML öğesi oluşturmak istediğinizi varsayar.

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.

Setting values on custom elements

Custom elements have two methods of passing data into them:

  1. Attributes: Which are displayed in markup and can only be set to string values
  2. Properties: Which are not displayed in markup and can be set to arbitrary JavaScript values

By default, React will pass values bound in JSX as attributes:

<my-element value="Hello, world!"></my-element>

Non-string JavaScript values passed to custom elements will be serialized by default:

// Will be passed as `"1,2,3"` as the output of `[1,2,3].toString()`
<my-element value={[1,2,3]}></my-element>

React will, however, recognize an custom element’s property as one that it may pass arbitrary values to if the property name shows up on the class during construction:

export class MyElement extends HTMLElement {
  constructor() {
    super();
    // The value here will be overwritten by React 
    // when initialized as an element
    this.value = undefined;
  }

  connectedCallback() {
    this.innerHTML = this.value.join(", ");
  }
}

Listening for events on custom elements

A common pattern when using custom elements is that they may dispatch CustomEvents rather than accept a function to call when an event occur. You can listen for these events using an on prefix when binding to the event via JSX.

export function App() {
  return (
    <my-element
      onspeak={e => console.log(e.detail.message)}
    ></my-element>
  )
}

Not

Olaylar büyük/küçük harfe duyarlıdır ve tire işaretlerini (-) destekler. Özel öğenin olaylarını dinlerken olayın büyük/küçük harf yapısını koruyun ve tüm tire işaretlerini dahil edin:

// Listens for `say-hi` events
<my-element onsay-hi={console.log}></my-element>
// Listens for `sayHi` events
<my-element onsayHi={console.log}></my-element>

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.
ÖncekiuseFormStatus
SonrakiOrtak (örn. <div>)