React Tutorial Bagian 21: Workshop Pelajaran Kedua dan Conditional Rendering

Hari ini, dalam terjemahan bagian selanjutnya dari kursus pelatihan Bereaksi, kami membawa Anda pada pelajaran kedua tentang rendering bersyarat dan lokakarya tentang topik ini.



→ Bagian 1: ikhtisar kursus, alasan popularitas React, ReactDOM dan JSX
→ Bagian 2: komponen fungsional
→ Bagian 3: file komponen, struktur proyek
→ Bagian 4: komponen induk dan anak
→ Bagian 5: mulai bekerja pada aplikasi TODO, dasar-dasar gaya
→ Bagian 6: tentang beberapa fitur kursus, JSX dan JavaScript
→ Bagian 7: gaya inline
→ Bagian 8: terus bekerja pada aplikasi TODO, terbiasa dengan sifat-sifat komponen
→ Bagian 9: properti komponen
→ Bagian 10: Workshop bekerja dengan properti komponen dan gaya
→ Bagian 11: pembuatan markup dinamis dan metode susunan peta
→ Bagian 12: lokakarya, pekerjaan tahap ketiga pada aplikasi TODO
→ Bagian 13: komponen berbasis kelas
→ Bagian 14: lokakarya tentang komponen berbasis kelas, status komponen
→ Bagian 15: bengkel kesehatan komponen
→ Bagian 16: tahap keempat dari pengerjaan aplikasi TODO, penanganan acara
→ Bagian 17: tahap kelima bekerja pada aplikasi TODO, memodifikasi status komponen
→ Bagian 18: tahap keenam dari pengerjaan aplikasi TODO
→ Bagian 19: metode siklus hidup komponen
Bagian 20: pelajaran pertama dalam rendering bersyarat
→ Bagian 21: pelajaran kedua dan lokakarya tentang rendering bersyarat
→ Bagian 22: tahap ketujuh bekerja pada aplikasi TODO, mengunduh data dari sumber eksternal
→ Bagian 23: pelajaran pertama tentang bekerja dengan formulir
→ Bagian 24: Pelajaran Bentuk Kedua
→ Bagian 25: Workshop bekerja dengan formulir
→ Bagian 26: arsitektur aplikasi, pola Container / Komponen
→ Bagian 27: proyek kursus

Pelajaran 37. Penguraian Bersyarat, Bagian 2

→ Asli

Dalam tutorial hari ini tentang rendering bersyarat, kita akan berbicara tentang menggunakan operator logis && (Dan). Kami akan bereksperimen dengan proyek standar yang dibuat oleh create-react-app, dalam file App.js mana kode berikut berada:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           unreadMessages: [               "Call your mom!",               "New spam email available. All links are definitely safe to click."           ]       }   }   render() {       return (           <div>              <h2>You have {this.state.unreadMessages.length} unread messages!</h2>           </div>       )   } } export default App 

Sekarang aplikasi terlihat di browser seperti yang ditunjukkan di bawah ini.


Halaman aplikasi di browser

Anda mungkin sudah menggunakan operator && dalam konstruksi seperti true && false (yang memberi false ). Agar ekspresi true dikembalikan sebagai hasil dari menghitung ekspresi seperti itu, itu harus terlihat seperti true && true . Saat memproses ekspresi seperti itu, JavaScript menentukan apakah sisi kiri mereka benar, dan jika demikian, cukup kembalikan apa yang ada di sisi kanan mereka. Jika ekspresi bentuk false && false diproses, maka false akan segera dikembalikan, tanpa memeriksa sisi kanan ekspresi. Akibatnya, operator && dapat digunakan dalam rendering bersyarat. Dengannya, Anda dapat mengembalikan sesuatu yang akan ditampilkan di layar, atau tidak mengembalikan apa pun.

Mari kita menganalisis kode aplikasi pelatihan.

Keadaan komponen App menyimpan larik string unreadMessages . Setiap baris dalam array ini mewakili pesan yang belum dibaca. Halaman ini menampilkan jumlah pesan yang belum dibaca, ditentukan berdasarkan panjang array. Jika array ini kosong, artinya, tidak akan ada elemen tunggal di dalamnya, maka aplikasi akan menampilkan apa yang ditunjukkan di bawah pada halaman.


Aplikasi memberi tahu kami bahwa tidak ada pesan yang belum dibaca

Untuk mencapai efek ini, cukup membawa array ke formulir ini: unreadMessages: [] .

Jika tidak ada pesan yang belum dibaca, maka sangat mungkin untuk tidak menampilkan pesan sama sekali. Jika kami menggunakan operator ternary yang kami bicarakan terakhir kali untuk menerapkan perilaku aplikasi ini, metode render() komponen App dapat ditulis ulang sebagai berikut:

 render() {   return (       <div>           {               this.state.unreadMessages.length > 0 ?              <h2>You have {this.state.unreadMessages.length} unread messages!</h2> :               null           }       </div>   ) } 

Sekarang, jika array unreadMessages kosong, tidak ada yang akan ditampilkan pada halaman. Tetapi kode yang disajikan di sini dapat disederhanakan dengan menggunakan operator && . Begini tampilannya:

 render() {   return (       <div>           {               this.state.unreadMessages.length > 0 &&              <h2>You have {this.state.unreadMessages.length} unread messages!</h2>           }       </div>   ) } 

Jika ada sesuatu dalam array, sisi kanan ekspresi ditampilkan pada halaman. Jika array kosong, tidak ada yang ditampilkan di halaman.

Ini bukan untuk mengatakan bahwa menggunakan operator && dalam rendering bersyarat mutlak diperlukan, karena efek yang sama dapat dicapai dengan menggunakan operator ternary yang mengembalikan null jika kondisi yang diuji salah. Tetapi pendekatan yang disajikan di sini menyederhanakan kode, dan, di samping itu, cukup sering digunakan, sehingga Anda dapat menemukannya saat membaca program orang lain.

Pelajaran 38. Workshop. Render bersyarat

→ Asli

▍ pekerjaan

Berikut adalah kode komponen fungsional App , yang disimpan dalam file App.js dari proyek standar yang dibuat menggunakan create-react-app.

 import React from "react" function App() {   return (       <div>           Code goes here       </div>   ) } export default App 

Anda perlu melakukan hal berikut:

1. Konversikan kode komponen untuk melengkapinya dengan status.
2. Pastikan bahwa status komponen akan berisi informasi tentang apakah pengguna "masuk" atau tidak (dalam latihan ini, "masuk" ke sistem dan "keluar" berarti hanya mengubah nilai terkait yang disimpan di negara bagian).
3. Tambahkan ke halaman bahwa komponen membentuk tombol yang memungkinkan pengguna untuk masuk dan keluar.
   
   
   1. Ini adalah tugas tambahan. Pastikan bahwa jika pengguna tidak masuk, tombol akan menampilkan LOG IN , dan jika itu log in, LOG OUT .
      
4. Pada halaman yang dibentuk oleh komponen, Logged in jika pengguna masuk, dan Logged out jika tidak Logged out .
   

Jika sekarang Anda merasa sulit bagi Anda untuk mulai menyelesaikan masalah ini, lihat tipsnya dan mulai bekerja.

▍Tips

Untuk menyelesaikan tugas ini, Anda perlu mengingat banyak dari apa yang kita bicarakan di kelas sebelumnya. Untuk memulainya, komponen yang dapat memiliki status harus merupakan komponen yang didasarkan pada kelas. Komponen ini harus memiliki konstruktor. Dalam keadaan komponen, Anda dapat menyimpan properti logis, misalnya, itu bisa disebut isLoggedIn , nilainya, true atau false , menunjukkan apakah pengguna masuk atau tidak. Agar tombol yang perlu ditambahkan ke halaman yang dihasilkan oleh aplikasi untuk dapat melakukan fungsinya, itu akan memerlukan event onClick . Untuk menampilkan teks yang berbeda, berdasarkan pada perubahan nilai negara, perlu untuk menggunakan teknologi rendering bersyarat.

OlSolusi

Kami mengubah komponen fungsional yang tersedia dalam kode menjadi komponen berdasarkan kelas. Kami membutuhkan ini karena beberapa alasan. Pertama, kita perlu bekerja dengan keadaan aplikasi. Kedua, kita membutuhkan pengendali event yang dipanggil saat tombol diklik. Pada prinsipnya, Anda dapat menulis fungsi independen dan menggunakannya untuk menangani peristiwa tombol, tetapi saya lebih memilih untuk menggambarkan penangan dalam kelas komponen.

Berikut ini kode untuk komponen fungsional yang dikonversi menjadi komponen berbasis kelas. Di sini kita, dalam konstruktor komponen, menjelaskan keadaan awalnya, yang berisi properti isLoggedIn disetel ke false .

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }   }   render() {          return (           <div>               Code goes here           </div>       )   } } export default App 

Kode di atas adalah solusi untuk bagian pertama dan kedua dari tugas. Sekarang kami akan bekerja untuk menambahkan tombol ke halaman yang ditampilkan oleh komponen. Sejauh ini, tombol ini akan menampilkan tulisan yang sama terlepas dari apa yang disimpan dalam status aplikasi. Kami akan melengkapinya dengan event handler, menempatkan di dalamnya, untuk memeriksa operabilitas kode kami, perintah sederhana untuk menampilkan pesan ke konsol. Selain itu, kami, dalam konstruktor komponen, akan mengikat penangan ini dengan this , yang berguna bagi kami ketika kami, dalam kode penangan ini, merujuk pada mekanisme yang dirancang untuk bekerja dengan keadaan komponen. Sekarang kodenya terlihat seperti di bawah ini.

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       console.log("I'm working!")   }     render() {          return (           <div>               <button onClick={this.handleClick}>LOG IN</button>           </div>       )   } } export default App 

Ketika Anda mengklik tombol LOG IN , I'm working! .

Sekarang ingat bahwa kita perlu, ketika sebuah tombol isLoggedIn , properti isLoggedIn disimpan dalam status isLoggedIn dari true ke false dan sebaliknya. Untuk melakukan ini, di handler klik tombol, Anda harus memanggil fungsi this.setState() , yang dapat digunakan dalam dua cara. Yaitu, dapat diberikan, dalam bentuk objek, ide baru tentang apa yang harus terkandung dalam negara. Varian kedua penggunaannya menyediakan transfer ke fungsi yang mengambil status sebelumnya dari komponen dan membentuk yang baru, mengembalikan, lagi-lagi, objek. Kami akan melakukan hal itu. Itulah yang kami dapatkan pada tahap pekerjaan ini.

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       this.setState(prevState => {           return {               isLoggedIn: !prevState.isLoggedIn           }       })   }     render() {          return (           <div>               <button onClick={this.handleClick}>LOG IN</button>           </div>       )   } } export default App 

Di sini kita dapat menggunakan konstruksi if-else, tetapi kita hanya mengonversi true menjadi false dan false ke true menggunakan operator logis ! (TIDAK).

Sejauh ini, kami tidak memiliki mekanisme yang, berdasarkan pada apa yang disimpan di negara bagian, akan memungkinkan kami untuk memengaruhi tampilan aplikasi. Karena itu, sekarang kita akan menyelesaikan tugas tambahan tugas nomor 3. Yaitu, kami akan membuat label pada tombol berubah tergantung pada status komponen. Untuk mencapai ini, Anda dapat mendeklarasikan variabel dalam metode render() yang nilainya, LOG IN atau LOG OUT , tergantung pada apa yang disimpan di negara bagian. Nilai ini kemudian dapat digunakan sebagai teks tombol. Ini tampilannya.

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       this.setState(prevState => {           return {               isLoggedIn: !prevState.isLoggedIn           }       })   }     render() {         let buttonText = this.state.isLoggedIn ? "LOG OUT" : "LOG IN"       return (           <div>               <button onClick={this.handleClick}>{buttonText}</button>           </div>       )   } } export default App 

Sekarang mari kita ambil bagian keempat dari tugas ini. Kami akan menampilkan teks pada halaman tergantung pada apakah pengguna masuk atau tidak. Bahkan, mengingat semua yang sudah ada dalam kode komponen, menyelesaikan masalah ini sangat sederhana. Di bawah ini adalah kode selesai untuk file App.js

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       this.setState(prevState => {           return {               isLoggedIn: !prevState.isLoggedIn           }       })   }     render() {         let buttonText = this.state.isLoggedIn ? "LOG OUT" : "LOG IN"       let displayText = this.state.isLoggedIn ? "Logged in" : "Logged out"       return (           <div>               <button onClick={this.handleClick}>{buttonText}</button>               <h1>{displayText}</h1>           </div>       )   } } export default App 

Seperti inilah tampilan aplikasi di browser.


Halaman aplikasi di browser

Mengklik tombol LOG IN ditunjukkan pada gambar sebelumnya akan mengubah status aplikasi, setelah itu LOG OUT ditampilkan pada tombol, dan teks ditampilkan pada halaman yang memberi tahu pengguna bahwa ia login.

Ringkasan

Hari ini kami terus berbicara tentang perenderan bersyarat, memeriksa penggunaan operator && , dan menyelesaikan tugas praktis yang melibatkan banyak mekanisme yang kami pelajari. Lain kali, Anda akan terus bekerja pada aplikasi-Todo dan topik baru.

Pembaca yang budiman! Sudahkah Anda mengatasi tugas praktis hari ini?