Render bersyarat mengacu pada perubahan perilaku aplikasi bergantung pada statusnya. Misalnya, Anda dapat mengubah pesan salam dari aplikasi React Anda menjadi gelap pada malam hari. Dengan cara ini Anda memiliki pesan tampilan yang berbeda tergantung pada waktu hari itu.

Render bersyarat memungkinkan Anda untuk merender komponen atau elemen React yang berbeda jika suatu kondisi terpenuhi. Dalam tutorial ini, Anda akan belajar tentang berbagai cara Anda dapat menggunakan rendering bersyarat dalam aplikasi React.js.

Cara Anda Dapat Menerapkan Rendering Bersyarat

Untuk mengikuti contoh-contoh ini, Anda perlu memiliki pemahaman dasar tentang cara kerja React. Jika Anda kesulitan dalam hal itu, jangan khawatir—kami punya solusi yang berguna panduan pemula untuk React.js.

Menggunakan Pernyataan Bersyarat

Seperti di JavaScript, Anda dapat menggunakan pernyataan kondisional seperti if…else untuk membuat elemen ketika kondisi tertentu terpenuhi.

Misalnya, Anda dapat menampilkan elemen tertentu di jika

blokir ketika suatu kondisi terpenuhi dan tampilkan yang berbeda di lain blok jika kondisi tidak terpenuhi.

Perhatikan contoh berikut yang menampilkan tombol login atau logout tergantung pada status login pengguna.

fungsi Dasbor (alat peraga) {
 const { isLoggedIn } = alat peraga
 jika (sudah masuk){
 kembali Keluar
 } lain{
 kembali Gabung
 }
}

Fungsi ini membuat tombol yang berbeda tergantung pada Apakah sudah masuk nilai yang diteruskan sebagai penyangga.

Terkait: Cara Menggunakan Alat Peraga di ReactJS

Atau, Anda dapat menggunakan operator ternary. Operator ternary mengambil kondisi yang diikuti oleh kode untuk dieksekusi jika kondisinya adalah benar diikuti oleh kode untuk dieksekusi jika kondisinya adalah palsu.

Tulis ulang fungsi di atas menjadi:

fungsi Dasbor (alat peraga) {
 const { isLoggedIn } = alat peraga
 kembali (
 <>
 {Tercatat?Keluar:Gabung)
 )
}

Operator ternary membuat fungsi lebih bersih dan lebih mudah dibaca dibandingkan dengan jika... lain penyataan.

Mendeklarasikan Variabel Elemen

Variabel elemen adalah variabel yang dapat menampung elemen JSX dan dirender saat diperlukan dalam aplikasi React.

Anda dapat menggunakan variabel elemen untuk merender hanya bagian tertentu dari komponen saat aplikasi Anda memenuhi kondisi yang ditentukan.

Misalnya, jika Anda hanya ingin merender tombol masuk saat pengguna tidak masuk dan tombol keluar hanya saat mereka masuk, Anda dapat menggunakan variabel elemen.

fungsi LoginBtn (alat peraga) {
 kembali (

 Gabung

 );
}
fungsi LogoutBtn (alat peraga) {
 kembali (

 Keluar

 );
}
fungsi Dasbor() {
 const [masuk, setLoggedIn] = useState (benar)
 const handleLogin = () => {
 setLoggedIn (benar)
 }
 const handleLogout = () => {
 setLoggedIn (salah)
 }
 biarkan tombol;
 jika (masuk) {
 tombol = 
 } lain {
 tombol = 
 }
 kembali (
 <>
 {masuk}
 )
}

Pada kode di atas, pertama-tama buat komponen tombol Login dan Logout kemudian tentukan komponen untuk membuat masing-masing dari mereka pada kondisi yang berbeda.

Dalam komponen ini, gunakan kait status React untuk melacak kapan pengguna masuk.

Terkait: Kuasai Keterampilan Bereaksi Anda dengan Mempelajari Kait Tambahan Ini

Sekarang, tergantung pada negara apakah membuat atau komponen.

Jika pengguna tidak masuk, render komponen jika tidak, render the komponen. Dua fungsi pegangan mengubah status login ketika tombol masing-masing diklik.

Menggunakan Operator Logika

Anda dapat menggunakan logika && operator untuk merender elemen secara kondisional. Di sini sebuah elemen dirender hanya jika kondisinya bernilai true jika tidak maka akan diabaikan.

Jika Anda ingin memberi tahu pengguna tentang jumlah notifikasi yang mereka miliki hanya ketika mereka memiliki satu atau lebih notifikasi, Anda dapat menggunakan yang berikut ini.

function ShowNotifications (alat peraga) {
 const { pemberitahuan } = alat peraga
 kembali (
 <>
 {notifications.length > 0 &&

 Anda memiliki notifikasi {notifications.length}.


 }
 )
}

Selanjutnya, untuk merender elemen jika ekspresi && logis dievaluasi ke nilai yang salah, rantai logika || operator.

Fungsi berikut menampilkan pesan “Anda tidak memiliki notifikasi” jika tidak ada notifikasi yang diteruskan sebagai alat peraga.

function ShowNotifications (alat peraga) {
 const { pemberitahuan } = alat peraga
 kembali (
 <>
 {notifications.length > 0 &&

 Anda memiliki notifikasi {notifications.length}.
 || 
Anda tidak memiliki notifikasi

 }
 )
}

Mencegah Komponen Dari Rendering

Untuk menyembunyikan komponen meskipun dirender oleh komponen lain, kembalikan null, bukan outputnya.

Pertimbangkan komponen berikut yang hanya membuat tombol peringatan jika pesan peringatan diteruskan sebagai alat peraga.

function Peringatan (alat peraga) {
 const {warningMessage} = alat peraga
 if (!warningMessage) {
 kembali nol
 }
 kembali (
 <>
Peringatan
 )
}

Sekarang, jika Anda memberikan 'warningMessage' ke komponen, tombol peringatan akan ditampilkan. Namun, jika tidak, akan mengembalikan null dan tombol tidak akan ditampilkan.

 // tombol peringatan ditampilkan
 // tombol peringatan tidak ditampilkan

Contoh Rendering Bersyarat dalam Aplikasi React Kehidupan Nyata

Gunakan rendering bersyarat untuk menyelesaikan berbagai tugas di aplikasi Anda. Beberapa di antaranya termasuk merender data API hanya jika tersedia dan menampilkan pesan kesalahan hanya jika ada kesalahan.

Rendering Data Diambil dari API di React

Mengambil data dari API bisa memakan waktu cukup lama. Oleh karena itu, pertama-tama, periksa apakah itu tersedia sebelum menggunakannya di aplikasi Anda jika tidak, React akan membuat kesalahan jika tidak tersedia.

Fungsi berikut menunjukkan bagaimana Anda dapat merender data yang dikembalikan oleh API secara bersyarat.

fungsi AmbilData() {
 const [data, setData] = useState (null);
 const apiURL = " https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY";
 // Ambil data dari API menggunakan Axios
 const fetchData = async () => {
 const response = menunggu axios.get (apiURL)
 // Perbarui status dengan data
 setData (respons.data) 
 }
 kembali (
 <>
Gambar astronomi hari ini

 {
 data && 
{data.title}

{data.penjelasan}

 }
 )
}

Dalam fungsi di atas, ambil data dari API Apod NASA menggunakan Axios. Saat API mengembalikan respons, perbarui status dan gunakan operator && logis untuk hanya merender data jika tersedia.

Terkait: Cara Mengkonsumsi API di React Menggunakan Fetch dan Axios

Menampilkan Pesan Kesalahan

Dalam kasus di mana Anda ingin menampilkan kesalahan hanya jika ada, gunakan rendering bersyarat.

Misalnya, jika Anda membuat formulir dan ingin menampilkan pesan kesalahan jika pengguna mengetik dalam format email yang salah, perbarui status dengan pesan kesalahan dan gunakan pernyataan if untuk merendernya.

fungsi tampilkanError() {
 const [kesalahan, setError] = useState (null)
 kembali (
 <>
 {
 jika (kesalahan) {
Terjadi kesalahan: {error}

 }
 }
 )
}

Memilih Apa yang Akan Digunakan di Aplikasi React Anda

Dalam tutorial ini, Anda mempelajari tentang beberapa cara yang dapat merender elemen JSX secara kondisional.

Semua metode yang dibahas memberikan hasil yang sama. Buat pilihan tentang apa yang akan digunakan tergantung pada kasus penggunaan, dan tingkat keterbacaan yang ingin Anda capai.

7 Tutorial Gratis Terbaik untuk Belajar Bereaksi dan Membuat Aplikasi Web

Kursus gratis jarang selengkap dan membantu -- tetapi kami telah menemukan beberapa kursus React yang sangat baik dan akan membantu Anda memulai dengan langkah yang benar.

Baca Selanjutnya

Tentang Penulis