“Props” kavramı tahmin edileceği üzere “Property” (Özellik) kelimesinin kısaltılmasından meydana gelir. Bizler oluşturduğumuz bileşenlere bir özellik kazandırmak istediğimizde, bu propslar aracılığı ile inputlar girerek belirtilen değerlerin render edilebilmesini sağlayabiliriz.
Bizler Component kavramı sayesinde kendi özel sınıflarımızı oluşturup bunları istedğimiz zaman çağırıp render edebiliyorduk. Şimdi de oluşturduğumuz bu bileşenlere özellik atamalarının nasıl olduğunu göreceğiz.
Konuyu daha iyi anlamak açısından “Box” adında bir component sınıfı oluşturalım. Bu sınıfımızı her render ettiğimizde farklı property değerleri atayalım. Örneğimizde arkaplan rengi ve yazı değerini atayacağız.
“Box” component sınıfı:
App.js dosyamızda componentimizi çağırırken “bgColor” ve “text” adında iki adet property tanımı oluşturduk. Bu isimlere kendiniz farklı değerler verebilirsiniz. Gönderdiğimiz bu inputları this.props altında yakalabiliriz.
Sırasıyla;
“Box” bileşenimizin içerisinde arkaplan rengi ataması yapabilmek için, “View” bileşenine style özelliğine
{backgroundColor:this.props.bgColor} değerini bu şekilde atadık. this.props altından gönderdiğimiz “bgColor” değerini yakaladığımıza dikkat edelim.
Aynı şekilde “text” girdisini de {this.props.text} ile yakalayıp “Text” bileşeni içerisinde kullanıdık.
Comments