“Component composition” olarak anlatılan bu konu Türkçe’ye böyle çevirdim. Şimdi, bir önceki projemizde yarattığımız iki sınıfı yeni sınıfımız içinden çağıralım. NYP bilen öğrenciler hemen new ile yaratalım, render fonksiyonunu çağıralım demişlerdir. Yok işimiz çok kolaylaştırılmış.
1 2 3 4 5 6 7 8 9 10 11 12 |
class App03 extends Component { render() { return ( <div className="test"> <App02 /> <App01 /> </div> ); } } export {App01, App02, App03} export default App03; |
Sadece “<>” arasına class ismini yazmam yeterlidir. Ancak “/” ile etiketini kapatmayı unutmayın. JSX bölümünde anlatırken class özelliğinin Javascript’te bir anahtar olduğunu söylemiştim. Burada tekrar hatırlatmak açısından className=”test” şeklinde kullanım yaptım. Tarayıcı tarafında tekrar “class” ifadesine dönüşür. (Kaynak kodu inceleyebilirsiniz.)