Bileşenlere Prop'ları Aktarma

React bileşenleri, birbirleriyle iletişim kurmak için prop’ları kullanır. Her üst eleman, alt elemanlarına prop’lar vererek onlarla bilgi paylaşabilir. Prop’lar, size HTML özelliklerini hatırlatabilir, ancak onların aracılığıyla nesneler, diziler ve fonksiyonlar da dahil olmak üzere herhangi bir JavaScript değeri aktarabilirsiniz.

Bunları öğreneceksiniz

Bileşene prop nasıl aktarılır
Bir bileşenden prop nasıl okunur
Prop’lar için varsayılan değerler nasıl belirlenir
Bir bileşene JSX nasıl aktarılır
Prop’ların zamanla nasıl değiştiği

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:

Fork

function Avatar() {
  return (
    <img
      className="avatar"
      src="https://react.dev/images/docs/scientists/1bX5QH6.jpg"
      alt="Lin Lanying"
      width={100}
      height={100}
    />
  );
}

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

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}
    />
  );
}

Not

Eğer person= sonrasındaki çift süslü parantezler sizi şaşırtırsa, bunların JSX süslü parantezlerinin içinde sadece bir nesne olduklarını hatırlayın.

Ş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!

Fork

import { getImageUrl } from './utils.js';

function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

export default function Profile() {
  return (
    <div>
      <Avatar
        size={100}
        person={{
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
      <Avatar
        size={80}
        person={{
          name: 'Aklilu Lemma',
          imageId: 'OKS67lh'
        }}
      />
      <Avatar
        size={50}
        person={{
          name: 'Lin Lanying',
          imageId: '1bX5QH6'
        }}
      />
    </div>
  );
}

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.

Tuzak

Prop’ları tanımlarken ( ve ) içindeki { ve } süslü parantez çiftini unutmayın:

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

Bu sözdizimi “yapı çözme” olarak adlandırılır ve bir fonksiyon parametresinden prop’ları okumaya eşdeğerdir:

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: