Koşullu oluşturma, bir uygulamanın davranışını durumuna bağlı olarak değiştirmeyi ifade eder. Örneğin, React uygulamanızın karşılama mesajını gece boyunca karanlık olarak değiştirebilirsiniz. Bu şekilde, günün saatine bağlı olarak farklı bir ekran mesajınız olur.

Koşullu oluşturma, bir koşul karşılandığında farklı React bileşenlerini veya öğelerini oluşturmanıza olanak tanır. Bu öğreticide, React.js uygulamalarında koşullu oluşturmayı kullanmanın farklı yollarını öğreneceksiniz.

Koşullu Oluşturmayı Uygulama Yolları

Bu örnekleri takip etmek için React'in nasıl çalıştığına dair temel bir anlayışa sahip olmanız gerekir. Bu durumda zorlanıyorsanız, endişelenmeyin; yeni başlayanlar için React.js kılavuzu.

Koşullu İfadeleri Kullanma

JavaScript'te olduğu gibi, belirli koşullar karşılandığında öğeler oluşturmak için if…else gibi koşullu ifadeleri kullanabilirsiniz.

Örneğin, belirtilen bir öğeyi şurada görüntüleyebilirsiniz: Eğer bir koşul karşılandığında engelle ve farklı bir koşul göster Başka koşul karşılanmazsa engelle.

Kullanıcının oturum açma durumuna bağlı olarak bir oturum açma veya oturum kapatma düğmesi görüntüleyen aşağıdaki örneği göz önünde bulundurun.

işlev Gösterge Tablosu (sahne) {
 const { isLoggedIn } = sahne
 if (isLoggedIn){
 dönüş Çıkış Yap
 } Başka{
 dönüş Giriş yapmak
 }
}

Bu işlev, duruma bağlı olarak farklı bir düğme oluşturur. Giriş Yapıldı prop olarak geçirilen değer.

İlişkili: ReactJS'de Props Nasıl Kullanılır

Alternatif olarak, üçlü operatörü kullanabilirsiniz. Üçlü operatör, bir koşulu ve ardından koşul varsa yürütülecek kodu alır. doğru ardından koşul varsa yürütülecek kod sahte.

Yukarıdaki işlevi şu şekilde yeniden yazın:

işlev Gösterge Tablosu (sahne) {
 const { isLoggedIn } = sahne
 dönüş (
 <>
 {Kayıtlı mı?Çıkış Yap:Giriş yapmak)
 )
}

Üçlü operatör, işlevi daha temiz ve okunması kolay hale getirir. eğer…başka ifade.

Eleman Değişkenlerini Bildirme

Öğe değişkenleri, JSX öğelerini tutabilen ve gerektiğinde bir React uygulamasında oluşturulabilen değişkenlerdir.

Uygulamanız belirtilen koşulu karşıladığında bileşenin yalnızca belirli bir bölümünü oluşturmak için öğe değişkenlerini kullanabilirsiniz.

Örneğin, kullanıcı oturum açmadığında yalnızca bir oturum açma düğmesi ve yalnızca oturum açtığında oturum kapatma düğmesi oluşturmak istiyorsanız, öğe değişkenlerini kullanabilirsiniz.

function LoginBtn (sahne) {
 dönüş (

 Giriş yapmak

 );
}
function LogoutBtn (sahne) {
 dönüş (

 Çıkış Yap

 );
}
işlev Gösterge Tablosu() {
 const [loggedIn, setLoggedIn] = useState (true)
 const handleLogin = () => {
 setLoggedIn (doğru)
 }
 const handleLogout = () => {
 setLoggedIn (yanlış)
 }
 bırak düğmesi;
 if (oturum açıldı) {
 düğme = 
 } Başka {
 düğme = 
 }
 dönüş (
 <>
 {giriş}
 )
}

Yukarıdaki kodda, önce Oturum Aç ve Oturumu Kapat buton bileşenlerini oluşturduk, ardından her birini farklı koşullarda işlemek için bileşen.

Bu bileşende, kullanıcının ne zaman oturum açtığını takip etmek için React durum kancasını kullanın.

İlişkili: Bu Ek Kancaları Öğrenerek Tepki Becerilerinizde Ustalaşın

Şimdi, duruma bağlı olarak ya veya bileşen.

Kullanıcı oturum açmadıysa, bileşen aksi takdirde the bileşen. İki tutamaç işlevi, ilgili düğmeye tıklandığında oturum açma durumunu değiştirir.

Mantıksal Operatörleri Kullanma

mantıksal kullanabilirsin && bir öğeyi koşullu olarak işlemek için operatör. Burada bir öğe yalnızca koşul doğru olarak değerlendirilirse oluşturulur, aksi takdirde yoksayılır.

Bir kullanıcıya yalnızca bir veya daha fazla bildirimi olduğunda sahip olduğu bildirim sayısını bildirmek istiyorsanız, aşağıdakileri kullanabilirsiniz.

fonksiyon Gösteri Bildirimleri (sahne) {
 const { bildirimler } = sahne
 dönüş (
 <>
 {notifications.length > 0 &&

 {notifications.length} bildiriminiz var.


 }
 )
}

Ardından, mantıksal && ifadesi yanlış bir değer olarak değerlendirilirse bir öğeyi oluşturmak için mantıksal || Şebeke.

Aşağıdaki işlev, sahne olarak hiçbir bildirim iletilmezse "Bildiriminiz yok" mesajını görüntüler.

fonksiyon Gösteri Bildirimleri (sahne) {
 const { bildirimler } = sahne
 dönüş (
 <>
 {notifications.length > 0 &&

 {notifications.length} bildiriminiz var.
 || 
hiç bildirimin yok

 }
 )
}

Bir Bileşenin Oluşturulmasını Önleyin

Bir bileşeni başka bir bileşen tarafından oluşturulmuş olsa bile gizlemek için çıktısı yerine null değerini döndürün.

Props olarak bir uyarı mesajı iletildiğinde yalnızca bir uyarı düğmesi oluşturan aşağıdaki bileşeni göz önünde bulundurun.

function Uyarı (sahne) {
 const {warningMessage} = aksesuarlar
 if (!warningMessage) {
 null döndür
 }
 dönüş (
 <>
Uyarı
 )
}

Şimdi, eğer 'uyarı Mesajını' iletirseniz, bileşen, bir uyarı düğmesi oluşturulacaktır. Ancak, yapmazsanız, null dönecek ve düğme görüntülenmeyecek.

 // uyarı butonu işleniyor
 // uyarı düğmesi görüntülenmiyor

Gerçek Hayat React Uygulamalarında Koşullu Oluşturma Örnekleri

Uygulamanızda farklı görevleri gerçekleştirmek için koşullu oluşturmayı kullanın. Bunlardan bazıları, API verilerinin yalnızca uygun olduğunda işlenmesini ve yalnızca bir hata olduğunda bir hata mesajının görüntülenmesini içerir.

React'te bir API'den Getirilen Verileri Oluşturma

Bir API'den veri almak biraz zaman alabilir. Bu nedenle, uygulamanızda kullanmadan önce kullanılabilir olup olmadığını kontrol edin, aksi takdirde mevcut değilse React bir hata verecektir.

Aşağıdaki işlev, bir API tarafından döndürülen verileri koşullu olarak nasıl oluşturabileceğinizi gösterir.

function FetchData() {
 const [veri, setData] = useState (boş);
 const apiURL = " https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY";
 // Axios kullanarak API'den veri al
 const fetchData = zaman uyumsuz () => {
 const yanıtı = axios.get'i bekleyin (apiURL)
 // Durumu verilerle güncelle
 setData (response.data) 
 }
 dönüş (
 <>
Günün astronomi fotoğrafı

 {
 veri && 
{veri.başlığı}

{veri.açıklama}

 }
 )
}

Yukarıdaki fonksiyonda, verileri şuradan alın: NASA Apod API'si Axios'u kullanarak. API bir yanıt döndürdüğünde, durumu güncelleyin ve verileri yalnızca uygun olduğunda işlemek için mantıksal && operatörünü kullanın.

İlişkili: Fetch ve Axios Kullanarak React'te API'ler Nasıl Tüketilir?

Hata Mesajlarını Görüntüleme

Bir hatayı yalnızca mevcut olduğunda görüntülemek istediğiniz durumlarda koşullu oluşturmayı kullanın.

Örneğin, bir form oluşturuyorsanız ve bir kullanıcı yanlış e-posta biçiminde yazarsa bir hata mesajı görüntülemek istiyorsanız, durumu hata mesajıyla güncelleyin ve oluşturmak için bir if ifadesi kullanın.

fonksiyon showError() {
 const [hata, setError] = useState (boş)
 dönüş (
 <>
 {
 if (hata) {
Bir hata oluştu: {hata}

 }
 }
 )
}

React Uygulamanızda Ne Kullanacağınızı Seçme

Bu öğreticide, JSX öğelerini koşullu olarak oluşturmanın çeşitli yollarını öğrendiniz.

Tartışılan tüm yöntemler aynı sonuçları verir. Kullanım durumuna ve ulaşmak istediğiniz okunabilirlik düzeyine bağlı olarak ne kullanacağınız konusunda bir seçim yapın.

React'i Öğrenmek ve Web Uygulamaları Yapmak için En İyi 7 Ücretsiz Öğretici

Ücretsiz kurslar nadiren kapsamlı ve faydalıdır - ancak mükemmel olan ve doğru yerden başlamanızı sağlayacak birkaç React kursu bulduk.

Sonrakini Oku

Yazar hakkında