Props, bir React bileşeninin girdileridir. Bir ebeveyn onları JSX'te özellikler olarak aktarır, <UserCard name="Ada" online={true} />, çocuk da onları tek bir nesne olarak alır; bu nesneyi genellikle fonksiyonun parametrelerinde destructure edersin. Props, bir bileşenin her kullanıldığında farklı veri göstermesini sağlar.
Aynı UserCard üç farklı kişiyi render eder. Sonuncusuna dikkat et: değeri olmayan bir özellik, online, online={true} anlamına gelir. Kendi adın ve rolünle dördüncü bir kart ekle.
Props aktarmak ve okumak
Bir metni tırnak içinde, diğer her değeri süslü parantez içinde aktar: sayılar, boolean'lar, diziler, nesneler, fonksiyonlar, hatta JSX.
<Product
title="Desk lamp"
price={39.5}
inStock={false}
tags={['light', 'office']}
seller={{ name: 'Lumen', rating: 4.8 }}
/>
React tüm özellikleri tek bir nesnede toplar ve bileşenin ilk argümanı olarak aktarır. Onu props olarak okuyabilir ya da ihtiyacın olan alanları doğrudan parametre listesinde açabilirsin:
function Product(props) {
return <h3>{props.title}</h3>;
}
function Product({ title, price, seller }) {
return <h3>{title}, ${price} from {seller.name}</h3>;
}
İki sürüm de aynı nesneyi alır. Destructuring yaygın stildir, çünkü fonksiyon imzası böylece bileşenin tam olarak hangi props'u kullandığını listeler.
Varsayılan değerler
Bir prop'a JavaScript'in destructuring varsayılanıyla, = value, varsayılan bir değer ver. Bu değer, ebeveyn prop'u atladığında ya da undefined aktardığında uygulanır. Gerçek değerler olan null, 0, false ya da '' için uygulanmaz.
İlk üç düğme, bir prop eksik ya da undefined olduğunda varsayılanlarına geri döner. Sonuncusu null aktarır, yani size gerçekten null olur ve arama hiçbir padding bulmaz. Düzeltmek için size={null} ifadesini size="small" olarak değiştir.
Eski kod varsayılanları statik bir özellikle ayarlar: Button.defaultProps = { size: 'medium' }. React 19 fonksiyon bileşenleri için defaultProps'u kaldırdı: JSX, bir fonksiyonda onu uyarı vermeden yok sayar. Class bileşenlerinde hâlâ çalışır. Destructuring varsayılanlarını kullan.
Fonksiyonları prop olarak aktarmak
Veri aşağı akar: bir ebeveyn çocuklarına props aktarır, asla tersi olmaz. Bir çocuğun ebeveyne bir şey olduğunu söylemesi gerektiğinde ebeveyn bir fonksiyon aktarır, çocuk da onu çağırır. Kurala göre bu props onSomething biçiminde adlandırılır.
Rating hiçbir şey saklamaz. Aldığı value'yu gösterir ve tıklamaları onRate aracılığıyla bildirir. State, onu yeniden aşağı aktaran App'te yaşar. handleRate yerine doğrudan onRate={setRating} aktar; yine çalışır: setter da bir fonksiyondur. State'i bu şekilde ortak bir ebeveyne taşımaya state'i yukarı taşımak denir.
Props yaymak
Anahtarları bir bileşenin props'uyla eşleşen bir nesnen zaten varsa, her özelliği yazmak yerine onu {...object} ile yay. Rest sözdizimi parametre listesinde bunun tersini yapar: birkaç prop'u adıyla al, geri kalan her şeyi topla ve ilet.
İkinci avatar person'ı yayar ve ardından color'ı ayarlar: aynı prop iki kez göründüğünde sonraki kazanır, bu yüzden geçersiz kılmaları yaymadan sonra koy. TextField, label'ı kendine saklar ve type, placeholder ve maxLength'i doğrudan <input>'a aktarır. Yaymayı bunun gibi sarmalayıcılar için kullan; başka yerlerde props'u açıkça listelemek bir bileşenin ne aldığını görmeyi kolaylaştırır.
Props salt okunurdur
Bir bileşen kendi props'unu asla değiştirmemelidir. Onlar ebeveyne aittir ve aynı nesne paylaşılıyor olabilir. Onlara yeniden atamana izin verilmeyen fonksiyon argümanları gibi davran:
function Counter({ count }) {
count = count + 1; // wrong: changes a local copy, the parent never sees it
return <p>{count}</p>;
}
function Profile(props) {
props.name = 'Someone else'; // wrong: in development React freezes props, so this throws a TypeError
return <p>{props.name}</p>;
}
Props yine de zamanla değişir. Ebeveyn yeni değerlerle yeniden render olduğunda çocuk yeni bir props nesnesi alır ve onunla render olur:
Temperature, celsius'u asla değiştirmez. Her render'da fahrenheit'ı ondan hesaplar. Kaydırıcıyı sürükle; ebeveynin state'i değişir, böylece çocuk yeni bir prop alır. Bir çocuğun kendi başına değiştirebileceği bir değere ihtiyacı varsa o değer prop değil, state'tir.
Props ve state
Props ve state, bir bileşenin ne render ettiğini etkileyen düz JavaScript değerleridir ve herhangi birindeki değişiklik bileşeni yeniden render eder. Fark, değerin sahibinin kim olduğudur.
| Props | State | |
|---|---|---|
| Nereden gelir | Ebeveynden, JSX özellikleri olarak | Bileşenin kendisinden, useState ya da useReducer ile |
| Bileşen onu değiştirebilir mi | Hayır, salt okunurdur | Evet, setter'ı aracılığıyla |
| Tipik kullanım | Bir bileşeni yapılandırmak: bir etiket, bir boyut, gösterilecek veri | Değişen bir şeyi hatırlamak: input metni, açık bir menü |
Aynı değer çoğu zaman ikisidir de. Yukarıdaki sıcaklık örneğinde celsius, App'te state, Temperature'da ise bir prop'tur. Sahibi onu state olarak tutar ve bir prop olarak aşağı aktarır; bir çocuğun ihtiyacı olduğunda onu değiştirecek bir fonksiyonla birlikte.
Bir prop, JSX ve bileşenler dahil her değeri tutabilir. icon={<StarIcon />} gibi bir öğe aktarmak, bir ebeveynin bir çocuktaki bir yuvayı doldurmasını sağlar; bu, children ile aynı fikirdir, sadece adı senin seçtiğindir.
children prop'u
Bir bileşenin açılış ve kapanış etiketleri arasına koyduğun her şey children adlı bir prop olarak gelir. İçeriğini önceden bilmeyen kartlar, paneller ve yerleşimler gibi sarmalayıcıları böyle kurarsın:
children sayfası birden çok yuva aktarmayı ve children ile güvenli şekilde çalışmayı anlatıyor.
Key'ler props değildir
key bir özellik gibi görünür, ama React liste öğelerini render'lar arasında eşleştirmek için onu kendine saklar. Bileşen onu asla almaz:
Konsol props.key'i undefined, props.id'yi ise gerçek değeriyle gösterir. Bir çocuğun tanımlayıcıya ihtiyacı olduğunda onu, burada id'nin yaptığı gibi, başka bir adla ikinci kez aktar. Bir geliştirme derlemesi props.key'i okuduğunda da uyarı verir; önizleme bir production derlemesi gibi çalışır, bu yüzden yalnızca undefined'ı görürsün.
Sıkça Sorulan Sorular
React'te props nedir?
Props (properties'in kısaltması) bir bileşenin argümanlarıdır. Ebeveyn onları JSX özellikleri olarak aktarır, <Avatar size={48} />, çocuk da onları tek bir nesne olarak alır; genellikle destructure edilir: function Avatar({ size }).
Bir prop için varsayılan değer nasıl verilir?
Bir destructuring varsayılanı kullan: function Button({ size = 'medium' }). Varsayılan, prop eksik olduğunda ya da undefined olduğunda uygulanır. React 19, fonksiyon bileşenleri için defaultProps'u kaldırdı; class bileşenleri hâlâ destekler.
Bir çocuk bileşen kendi props'unu değiştirebilir mi?
Hayır. Props salt okunurdur. Çocuğun gösterdiğini değiştirmek için ebeveyn yeni props aktarır; çocuğun bir değişiklik istemesine izin vermek için ebeveyn onChange gibi bir fonksiyon aktarır ve çocuk onu çağırır.
Props ile state arasındaki fark nedir?
Props ebeveynden gelir ve çocuk onları değiştiremez. State bileşenin kendisine aittir ve setter'ı aracılığıyla değişir. Bir değer çoğu zaman ebeveynde state, çocuklarında ise bir prop'tur.
props.key neden undefined?
key (eski React'teki ref gibi) liste öğelerini takip etmek için React'in kendisi tarafından kullanılır ve bileşene aktarılmaz. Çocuğun bu değere ihtiyacı varsa onu başka bir adla yeniden aktar, örneğin <Row key={id} id={id} />.
