ReactJs Lists and Conditionals

Merhaba arkadaşlar,
“ReactJs Lists and Conditionals” konusu üzerine konuşacağız.

Bir önceki yazımızda “ReactJs Two-Way Binding” üzerinde durduk. Two-Way (çift-yönlü) ve One-Way (tek-yönlü) binding konusu üzerine konuşmuştuk. Bu yazımızda ise veri listeleme ve koşula dayalı sunum konusunda konuşup, bilgiler vermeye çalışacağız.

gecmiş-olsun-elazig

Yazıya başlamadan önce,

Elazığ-Sivrice ‘de meydana gelen deprem sebebiyle depremde hayatını kaybedenlere Allah ‘tan rahmet, yaralananlara acil şifalar diliyorum. Allah ülkemizi  her türlü afetten korusun.

 

ReactJs Lists and Conditionals

Bu yazıyı iki kısımda ele alalım ve bunları örnekler üzerinden açıklamaya çalışalım :

  • Birincisi listeleme,
  • İkincisi ise belirli bir koşul çerçevesinde verinin gösterilmesi.

ReactJs Lists and Conditionals (Listeler ve Koşullular)

Hemen bir örnek üzerinden incelemeye başlayalım.

ReactJs Lists and Conditionals
App.js

Şimdi ne yaptık hızlıca üzerinden geçelim.

App.js içerisinde <AddPerson …/> ve {persons}  olmak üzere iki adet component render ediliyor.

<AddPerson /> App.js içerisindeki state ‘e person objesini one-way binding (tek yönlü iletim) ile aktarıyor.

persons ise state içerisindeki isPersonsVisible değişkeninin durumuna (true/false) göre render ediliyor veya edilmiyor.

Genel olarak bakıldığında app.js içerisinde function ‘ların varlığını görüyorsunuz (addPerson, deletePerson ve showHidePerson). Bunların yaptığı işlere de göz atacak olursak

showHidePerson() -> state üzerinde isPersonsVisible değişkeninin durumunun inverse (ters) edilmesinden sorumlu (true –> false, false –> true).

addPerson(person) -> aldığı person objesini state ‘e yansıtıyor.

deletePerson(personIndex) -> person listesi içerisinde silinecek olan objenin array içerisindeki pozisyonunu alarak silme işlemini gerçekleştiriyor.

PersonList.js ‘e daha dikkatli bakacak olursak;

ReactJs Lists and Conditionals
PersonList.js

Sil butonu tetiklendiğinde bu component içerisinde bir metod tetiklenmiyor. PersonList.js sınıfı App.js içerisinde çağırılırken <Person … click=”…” />  click parametresi içerisinde deletePerson(…) metodu tetiklenmişti. Yani burada şunu yapmış olduk, child component içerisinden sil butonuna basarak base component ‘te bulunan metodu tetikledik.

 

AddPerson.js sınıfına dikkat edecek olursak;

ReactJs Lists and Conditionals
AddPerson.js

Bu sınıf person objesi üretmekten sorumlu. Şimdi, types konusunda bir açıklama yapmak istiyorum. Her input için bir handler metod yazmak istemediğimden dolayı, state içerisindeki property isimlerini taşıyan tipler tanımlayarak state ‘e aktarım yaparken bu tip parametrelerini kullandım. Gelelim ikinci detayımıza bu component person objesini bir üst component ‘e aktarırken yine az önce bahsettiğim child-to-parent olayını gerçekleştiriyor.

Tekrar App.js içerisine dönüp bakacak olursak şöyle bir syntax mevcut:

render() {
    let persons = null;

    if (this.state.isPersonsVisible) {
      persons = (
        <div>
          {this.state.persons.map((person, index) => {
            return <Person key={index} name={person.name} id={person.id} gender={person.gender} click={() => this.deletePerson(index)} />;
          })}
        </div>
      );
    }
}

Burada ise yapılan iş özetle state içerisindeki persons listesindeki person objelerini person component ‘ine aktarmak. Yalnız bunu yaparken dikkat ederseniz javascript içerisinde html syntax ‘ı mevcut (JSX). Durumsal olarak isPersonsVisible true ise listeleme yapılıyor değilse herhangi bir şey render edilmiyor.

Bakalım Neler Olmuş

ReactJs Lists and Conditionals

Evveeet… Bir yazımızın daha sonuna geldik. Aklınıza takılan/anlamadığınız konularda aşağıdaki iletişim adreslerinden yazabilir veya yorum bırakabilirsiniz. Umarım faydalı olmuştur.

Bir önceki “ReactJs Two-Way Binding adlı yazıma buradan ulaşabilirsiniz.

Bir sonraki yazımızda olmazsa olmazlarımızdan “ReactJs Debuggingkonusuna giriş yapacağız.

Serinin bir sonraki yazısında görüşmek üzere.

Saygılar sevgiler… Hoşçakalın.

Faydalı Linkler

React ‘e ait türkçe dokümantasyona buradan ulaşabilirsiniz.

13

Batuhan Yahşi

Yorum Yaz

Haftalık Bülten

Mobilhanem'de yayınlanan dersleri haftalık mail almak ister misiniz?