Render bersyarat adalah salah satu yang paling umum digunakan dalam React. Saat aplikasi tumbuh dan hal-hal menjadi kompleks, pernyataan rendering bersyarat mungkin menjadi kurang mudah dibaca. Pada artikel ini, kita akan membahas cara menulis kondisional yang indah di React dengan mudah.

Teknik Rendering Bersyarat Umum

Ini adalah beberapa teknik yang digunakan saat menerapkan rendering bersyarat dalam komponen React:

Menggunakan &&

Ini adalah salah satu teknik yang paling umum digunakan untuk rendering bersyarat. Penting untuk diingat bahwa teknik ini harus digunakan dengan sangat hati-hati karena dapat menyebabkan bug yang tidak dapat diprediksi.

Menggunakan Pernyataan If/Else

Teknik lain untuk rendering bersyarat dalam React adalah menggunakan pernyataan if/else. Ini dapat menghasilkan kode komponen yang rumit ketika ada beberapa kondisi yang harus diperiksa.

Menggunakan Operator Terner

Operator ternary adalah teknik populer yang digunakan untuk rendering bersyarat di React. Masalah dengan menggunakan operator ternary adalah ketika Anda memiliki beberapa kondisi untuk diperiksa, yang mengarah ke penggunaan operator ternary bersarang. Itu dapat membuat kode kurang mudah dibaca dan kompleks.

Menulis Kondisi Bersih

Memperkenalkan , komponen React yang sederhana dan kecil yang memungkinkan Anda menulis persyaratan yang indah di React. Ini akan memungkinkan Anda untuk menulis kode rendering bersyarat yang dapat dibaca di React dengan cepat. Apakah Anda perlu menguji satu kondisi atau serangkaian kondisi, Anda dapat melakukannya dengan .

Komponen bekerja mirip dengan pernyataan if/else dan switch/case. Ini memungkinkan Anda untuk memeriksa serangkaian kondisi untuk rendering bersyarat di React.

Pada contoh di atas, kode menampilkan pesan berdasarkan hari dalam seminggu. Persyaratan terakhir selalu benar, tetapi hanya akan dirender ketika semua kondisi di atas gagal. Ini bekerja persis seperti pernyataan default switch/case .

Komponen menerima prop isTrue , memungkinkan Anda menerapkan kondisi bersarang. Ini berarti bahwa semua persyaratan anak akan diperiksa hanya jika kondisi yang diteruskan di bernilai benar.

Lihat komponen React kecil ini di sini di GitHub .

Bangun aplikasi web yang dapat disusun

Jangan membangun monolit web. Gunakan Bit untuk membuat dan menyusun komponen perangkat lunak yang dipisahkan — dalam kerangka kerja favorit Anda seperti React atau Node. Bangun aplikasi yang dapat diskalakan dan modular dengan pengalaman pengembang yang kuat dan menyenangkan.

Bawa tim Anda ke Bit Cloud untuk menghosting dan berkolaborasi pada komponen bersama-sama, serta mempercepat, menskalakan, dan menstandarkan pengembangan sebagai sebuah tim. Coba frontend yang dapat dikomposisi dengan Sistem Desain atau Frontend Mikro , atau jelajahi backend yang dapat dikomposisi dengan komponen sisi server .

Cobalah →

Belajarlah lagi