React UI Mechanics
React UI Bileşinini Birbiri ile Nasıl Konuştururuz ?
React mekanik örneklerini anlatmayı düşündüğüm bu yazı serisinde amacım CSS ve Görselliğe takılmadan UI Mekaniği ile ilgili örnekler geliştirmek. Konunun üçüncü dersi 2 UI bileşeni geliştirerek bunların bir diğeri içerisindeki bilgiyi kullanmasını sağlamak. Bunu nasıl yaparız sorusuna cevap arıyor olacağız.
Published in
2 min readNov 15, 2020
Not: React UI Mekanikleri ile ilgili tüm yazı serisine bu linkten erişebilirsiniz.
App FooView bileşenini ekledik. Bu bileşen kişinin yaşını ve doğum yılını gösteriyordu. Bu işlemi yaparken props ve state özelliklerini kullanıyordu.
- Bu yazıda DooView bileşeni oluşturacağız. İlk aşamada bu bileşen sadece mevcut tarihin yılını girdiğimiz ve bu değeri ekranda gösteren bir bileşen olacak
- Daha sonra bu bileşen ile FooView bileşenini birleştireceğiz. DooView içerisine girdiğimiz değeri FooView bileşeninin kullanmasını sağlayacağız. Bu yönteme Lifting State Up (State yukarı taşıma) denir.
1. DooView Bileşenin Oluşturalım.
- components klasörü içerisine DooView bileşenini ekliyoruz.
- bileşen içerisinde bir text input birde span elemanı bulunur.
- input handleChange ile girilen değeri yıl değeri olarak span elemanın içerisine yazdırılır.
- Bu nesneyi de App.js içerisine FooView altına ekleyelim
<FooView/>
<DooView/>
- İki bileşende ekranda gözükmektedir. Ve birbirlerinden bağımsız olacak çalışabilmektedir.
- Peki 2 bileşen FooView ve DooView birlikte çalışşın istersek.
2. FooView , DooView içerisindeki State (Mevcut) Yılı kullansın İstersek
- Bunun için DooView içerisindeki state ve state değişimini yöneten kod parçalarını FooView ile ortak parent içerisine taşımamız lazım. Buda bu mantık kodlarını App.js taşıyacağımız anlamına geliyor.
- DooView kendisine geçirilen props içerisinde handleChange ve year bilgileri kullanacak hale getiriyoruz.
<DooView handleChange={this.handleChange}
year={year}
- Bu year değerini FooView kullanabilmesi için bunu aynı zamanda props olarak FooView geçiyoruz.
<FooView year={year}/>- Bu sayede artık ister yılı değiştirelim, ister yaşını değiştirelim 2 side mevcut doğum yılını güncelleyecektir. Bu sayede FooView, DooView bileşenindeki değeri kullanabilir oldu ama state bilgisini Lifting State Up (State yukarı taşıma) App.js içerisine taşıyarak yaptık.
Kod Örnekleri
Referanslar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
