React’te bir komponenti bir koşula göre gösterirken iki tane && ampersant işareti kullanılıyor genelde. Ama alternatifi olan ternary operator ( ? : ) ile daha okunaklı bir kod yazabilirsiniz 😊
Eski yöntem : && kullanarak koşullu rendering
Eski ve hep kullanılan yöntem iki tane && işareti koyarak eğer soldaki koşul doğru ise sağdaki elementi renderlama yöntemi.
Bu yöntem çalışan bir yöntem fakat karmaşık kodlarda okuması zor olabilir ve problem çıktığında bulup çözmesi zor olabilir.
function MyComponent({ giris }) {
return (
<div>
{giris && <p>Hoşgeldiniz</p>}
</div>
);
}Ternary operatör ile koşullu render
Öncelikle ternary operatör nedir onu göstereyim.
Javascriptte ternary operatör tek bir satırda basit bir if koşulu yazmak denebilir.
Öncelikle kontrol edilecek koşul yazılır, ardından soru işareti koyulur ve eğer koşul doğruysa gerçekleşecek ifade yazılır, son olarak iki nokta üst üste koyulur ve koşul yanlış ise gerçekleşecek ifade yazılır.
<İfade> ? <Doğruysa> : <Yanlışsa>
//örnek ternary
let x = 5;
x = 5 ? "x = 5 doğrudur" : "x = 5 yanlıştır"Ternary operatörün faydaları
Ternary operatör sayesinde daha okunaklı bir kod yapısına sahip olabilirsiniz. Ayrıca eski kullanıma göre ifadenin false olduğu durumda da bir işlem yapılması hata kontrolünü kolaylaştırıyor.
W3 Schoolsun ingilizce ternary operatör makalesini de okuyabilirsiniz.
