Bileşenlere Prop'ları Aktarma

Tanıdık Prop’lar

Prop’lar, JSX etiketine ilettiğiniz bilgilerdir. Örneğin, className, src, alt, width ve height, bir <img>’ye aktarabileceğiniz prop’lardan bazılarıdır:

Bir <img> etiketine aktarabileceğiniz prop’lar önceden tanımlanmıştır (ReactDOM, HTML standardına uygundur). Ancak, özelleştirmek için <Avatar> gibi kendi bileşenlerinize herhangi bir özellik aktarabilirsiniz. İşte nasıl!

Bileşene prop’lar aktarma

Bu kodda, Profile bileşeni, Avatar adlı alt bileşenine herhangi bir prop aktarmıyor:

export default function Profile() {
  return (
    <Avatar />
  );
}

Avatar’a iki adımda prop’lar ekleyebilirsiniz.

Adım 1: Alt bileşene prop’lar aktarma

Öncelikle, Avatar’a bazı prop’lar ekleyin. Örneğin, iki prop ekleyelim: person (bir nesne) ve size (bir sayı):

export default function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}

Şimdi bu prop’ları Avatar bileşeni içinde okuyabilirsiniz.

Adım 2: Alt eleman içinde prop’ları okuma

Bu prop’ları, function Avatar’dan hemen sonra ({ ve }) içinde virgülle ayrılan person, size isimlerini yazarak okuyabilirsiniz. Bu, onları Avatar kodunun içinde bir değişken gibi kullanmanıza olanak tanır.

function Avatar({ person, size }) {
  // burada person ve size kullanılabilir
}

Avatar’a, person ve size prop’larını kullanarak render etmek için biraz mantık ekleyin ve hazırsınız.

Artık Avatar’ı farklı prop’larla birçok farklı şekilde render etmek için yapılandırabilirsiniz. Değerler ile oynamayı deneyin!

Prop’lar, üst ve alt bileşenleri bağımsız olarak düşünmenize olanak tanır. Örneğin, Avatar’ın bunları nasıl kullandığını düşünmeden, Profile içindeki person veya size prop’larını değiştirebilirsiniz. Benzer şekilde, Profile’a bakmadan, Avatar’ın bu prop’ları nasıl kullandığını değiştirebilirsiniz.

Prop’ları ayarlayabileceğiniz “düğmeler” gibi düşünebilirsiniz. Aslında, prop’lar fonksiyonlara sağlanan argümanlarla aynı rolü üstlenirler - aslında, prop’lar bileşeniniz için tek argümanlardır! React bileşen fonksiyonları, bir props nesnesi olarak tek bir argümanı kabul ederler:

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

Genellikle tüm props nesnesine ihtiyacınız olmaz, bu yüzden onu bireysel prop’lara ayırarak yapıyı çözmeniz gerekir.

function Avatar({ person, size }) {
  // ...
}

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

Bir prop için varsayılan değeri belirleme

Bir prop’a, belirtilen değer olmadığında geri dönecek varsayılan bir değer vermek isterseniz, parametreden hemen sonra = ve varsayılan değeri koyarak yapı çözmeyle yapabilirsiniz:

function Avatar({ person, size = 100 }) {
  // ...
}

Şimdi, <Avatar person={...} /> size prop’u belirtilmeden render edilirse, size 100 olarak ayarlanacaktır.

Varsayılan değer yalnızca, size prop’u eksikse veya size={undefined} olarak geçirilirse kullanılır. Ancak size={null} veya size={0} olarak geçirirseniz, varsayılan değer kullanılmaz.

JSX yayılım sözdizimiyle prop’ları iletmek

Bazı durumlarda, prop’ları aktarmak çok tekrar edici olabilir:

function Profile({ person, size, isSepia, thickBorder }) {
  return (
    <div className="card">
      <Avatar
        person={person}
        size={size}
        isSepia={isSepia}
        thickBorder={thickBorder}
      />
    </div>
  );
}

Tekrarlayan kodda yanlış olan bir şey yoktur. Daha okunaklı olabilir. Ancak bazen kısa ve öz olmaya önem verirsiniz. Bazı bileşenler, bu Profile bileşeninin Avatar ile yaptığı gibi, tüm prop’larını alt elemanlarına iletirler. Doğrudan hiçbir prop kullanmadıklarından, daha özlü “yayılma (spread)” sözdizimi kullanmak mantıklı olabilir:

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

Bu, her birinin adını listeleyerek Profile’ın tüm prop’larını Avatar’a iletiyor.

Spread sözdizimini ölçülü bir şekilde kullanın. Her diğer bileşende bunu kullanıyorsanız, bir şeyler yanlış demektir. Çoğu zaman, bileşenlerinizi ayırmanız ve alt elemanları JSX olarak iletilmesi gerektiği anlamına gelir. Sonraki adımda daha fazlası var!

JSX’i alt eleman olarak aktarma

Dahili tarayıcı etiketlerini iç içe geçirmek yaygındır:

<div>
  <img />
</div>

Bazen kendi bileşenlerinizi aynı şekilde iç içe yerleştirmek istersiniz:

<Card>
  <Avatar />
</Card>

Bir JSX etiketi içine içerik yerleştirdiğinizde, üst eleman, children adında bir prop’un içinde bu içeriği alacaktır. Örneğin, aşağıdaki Card bileşeni, <Avatar /> olarak ayarlanmış bir children prop’u alacak ve bunu bir sarma divinde render edilecektir:

<Card> içindeki <Avatar>’ı bir metinle değiştirerek, Card bileşeninin herhangi bir iç içe içeriği sarmalayabileceğini görmek için deneyebilirsiniz. İçinde neyin render edildiğini “bilmesi” gerekmez. Bu esnek kalıbı birçok yerde göreceksiniz.

Bir children prop’una sahip bir bileşeni, üst elemanların istediği JSX ile “doldurabileceği” bir “delik” olarak düşünebilirsiniz. Sıklıkla, görsel sarmalayıcılar için (panel, grid vb.) children prop’u kullanacaksınız.

Aşağıdaki Clock bileşeni, üst elemandan iki prop alır: color ve time. (Üst elemanın kodu, henüz incelemeyeceğimiz durum (state) kullandığı için atlanmıştır.)

Aşağıdaki seçim kutusunda rengi değiştirmeyi deneyin:

Bu örnek, bir bileşenin zamanla farklı prop’lar alabileceğini gösterir. Prop’lar her zaman statik değildir! Burada time prop’u her saniyede bir değişir ve color prop’u başka bir renk seçtiğinizde değişir. Prop’lar, bir bileşenin verilerini sadece başlangıçta değil, herhangi bir zamandaki durumunu yansıtır.

Ancak, prop’lar immutable (değiştirilemez) özelliktedir - bilgisayar bilimlerinde “değiştirilemez” anlamına gelen bir terimdir. Bir bileşen, prop’larını değiştirmesi gerektiğinde (örneğin, bir kullanıcı etkileşimine veya yeni verilere yanıt olarak), farklı bir nesne olan farklı prop’ları geçmesi için üst elemanından “istemek” zorunda kalacaktır! Eski prop’ları atılacak ve sonunda JavaScript motoru tarafından bunların işgal ettiği bellek geri alınacaktır.

Prop’ları “değiştirmeye” çalışmayın. Kullanıcı girdisine yanıt vermeniz gerektiğinde (seçilen rengi değiştirme gibi), State: Bir Bileşenin Belleği konusunda öğrenebileceğiniz şekilde “state ayarı” yapmanız gerekecektir.