React Tutorial Bagian 11: Formasi Markup Dinamis dan Metode Array Peta

Pada bagian hari ini dari terjemahan kursus pelatihan Bereaksi, kita akan berbicara tentang menggunakan metode array peta standar () untuk mengatur pembentukan dinamis markup JSX yang menguraikan kumpulan elemen dengan tipe yang sama.



→ 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 21. Pembuatan markup dinamis dan metode array peta

→ Asli

Kami akan melanjutkan pekerjaan dari saat kami berhenti menyelesaikan tugas praktis sebelumnya. Ingat bahwa kode file App.js tampak seperti ini:

 import React from "react" import Joke from "./Joke" function App() {   return (       <div>           <Joke punchLine="It's hard to explain puns to kleptomaniacs because they always take things literally." />                     <Joke               question="What's the best thing about Switzerland?"               punchLine="I don't know, but the flag is a big plus!"           />                     <Joke               question="Did you hear about the mathematician who's afraid of negative numbers?"               punchLine="He'll stop at nothing to avoid them!"           />                     <Joke               question="Hear about the new restaurant called Karma?"               punchLine="There's no menu: You get what you deserve."           />                     <Joke               question="Did you hear about the actor who fell through the floorboards?"               punchLine="He was just going through a stage."           />                     <Joke               question="Did you hear about the claustrophobic astronaut?"               punchLine="He just needed a little space."           />                 </div>   ) } export default App 

Komponen App menampilkan serangkaian komponen Joke . Beginilah tampilan halaman aplikasi pada tahap kerja ini.


Halaman aplikasi

Properti question dan punchLine diteruskan ke beberapa komponen ini, dan hanya punchLine ke punchLine . Sekarang nilai properti ini diatur dalam kode untuk membuat instance komponen Joke dalam bentuk teks biasa. Pada kenyataannya, sebagian besar data yang ditampilkan pada halaman aplikasi Bereaksi memasuki aplikasi sebagai hasil dari permintaan HTTP ke API tertentu. API ini didukung oleh server yang mengambil informasi dari basis data, memformatnya dalam bentuk kode JSON dan mengirimkan kode ini ke bagian aplikasi klien. Kami belum mencapai tingkat seperti itu untuk memenuhi permintaan API, jadi sekarang, sebagai sumber data, kami akan menggunakan file dengan data yang dapat diperoleh dengan mem-parsing respons JSON server. Yaitu, itu akan menjadi file jokesData.js dengan konten berikut:

 const jokesData = [   {       id: 1,       punchLine: "It's hard to explain puns to kleptomaniacs because they always take things literally."   },   {       id: 2,       question: "What's the best thing about Switzerland?",       punchLine: "I don't know, but the flag is a big plus!"   },   {       id: 3,       question: "Did you hear about the mathematician who's afraid of negative numbers?",       punchLine: "He'll stop at nothing to avoid them!"   },   {       id: 4,       question: "Hear about the new restaurant called Karma?",       punchLine: "There's no menu: You get what you deserve."   },   {       id: 5,       question: "Did you hear about the actor who fell through the floorboards?",       punchLine: "He was just going through a stage."   },   {       id: 6,       question: "Did you hear about the claustrophobic astronaut?",       punchLine: "He just needed a little space."   } ] export default jokesData 

File ini akan berlokasi di direktori src proyek kami.


File baru di folder src

Bahkan, itu berisi berbagai objek. Array serupa dapat diperoleh dengan mem-parsing data JSON yang diterima dari API tertentu. Kami mengekspor dari file ini sejumlah jokesData . Jika perlu, kita dapat mengimpor file ini ke komponen yang dibutuhkannya dan bayangkan bahwa kita sedang bekerja tidak dengan data yang diambil dari file tersebut, tetapi dengan apa yang mengembalikan beberapa API kepada kita.

Sekarang kita memiliki array data sumber, mari kita pikirkan tentang bagaimana mengubah data ini menjadi serangkaian instance komponen Bereaksi.

Banyak pengembang mengatakan bahwa berkat Penguasaan Bereaksi, mereka telah belajar lebih banyak tentang JavaScript. Alasan untuk ini adalah karena tindakan yang mirip dengan yang akan kita bicarakan dalam kerangka kerja lain seperti Angular dan Vue dilakukan menggunakan beberapa alat khusus. Dan di Bereaksi, ini dilakukan menggunakan JavaScript biasa.

Secara khusus, kami berencana untuk menggunakan beberapa metode standar array, yang merupakan fungsi tingkat tinggi. Metode ini dapat, sebagai argumen, menerima fungsi yang dijelaskan oleh programmer. Fungsi inilah yang menentukan apa yang akan dilakukan panggilan ke satu atau metode standar lainnya dengan elemen-elemen array.

Misalkan kita memiliki array numerik:

 const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 

Kita dapat memproses larik ini menggunakan metode larik map() standar map() , memberikan fungsi tertentu yang menetapkan urutan konversi elemen larik ini. Dalam kasus kami, fungsi ini akan diteruskan, satu per satu, angka-angka dari array ini. Suatu fungsi dapat melakukan apa saja dengan mereka, setelah itu apa yang dikembalikan akan pergi ke array baru, ke elemen yang indeksnya sesuai dengan indeks elemen yang sedang diproses. Jika kita perlu membentuk array baru, elemen yang merupakan elemen dari array asli, dikalikan dengan 2, maka akan terlihat seperti ini:

 const doubled = nums.map(function(num) {   return num * 2 }) 

Periksa pengoperasian kode ini:

 console.log(doubled) // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20] 

Jika Anda belum pernah bertemu dengan metode array sebelumnya - seperti map() , filter() , reduce() dan lainnya - disarankan untuk mengatasinya.

Di sini kita akan menggunakan metode map() untuk secara otomatis menghasilkan daftar instance komponen.

Mari kita kembali ke contoh kita. Impor file App.js ke file App.js Ini dilakukan seperti ini:

 import jokesData from "./jokesData" 

Setelah itu, dalam kode program, kita dapat bekerja dengan array jokesData . Yaitu, kita akan menggunakan metode map() . Inilah yang "kosong" dari metode ini akan terlihat.

 jokesData.map(joke => { }) 

Perhatikan bahwa di sini kita meneruskan fungsi panah ke metode map() . Dalam kasus kami, ini memungkinkan kami untuk membuat kode lebih kompak. Karena fungsi hanya mengambil satu parameter ( joke ), kami, ketika dideklarasikan, dapat melakukannya tanpa tanda kurung.

Dari fungsi yang diteruskan ke metode map() , kami ingin mengembalikan instance baru dari komponen Joke , di mana properti question dan punchLine dari elemen array punchLine masuk ke dalamnya punchLine ke sana. Begini tampilannya:

 jokesData.map(joke => {   return (   <Joke question={joke.question} punchLine={joke.punchLine} />   ) }) 

Kode ini dapat dipersingkat jika dua fakta diperhitungkan. Pertama, return mengembalikan hanya satu elemen, sehingga Anda dapat menempatkan elemen ini segera setelah return , menghilangkan kebutuhan untuk tanda kurung. Kedua, fungsi panah hanya berisi operasi pengembalian nilai tertentu, oleh karena itu, ketika mendeklarasikan fungsi seperti itu, Anda dapat melakukannya tanpa kata kunci return dan tanpa kurung kurawal. Selain itu, kami ingat bahwa sebagai hasil dari metode map() , array baru terbentuk. Array ini perlu disimpan di suatu tempat. Semua pertimbangan ini membawa kita pada hal berikut:

 const jokeComponents = jokesData.map(joke => <Joke question={joke.question} punchLine={joke.punchLine} />) 

Konstanta jokeComponents sekarang jokeComponents berisi sebuah array, yang masing-masing elemennya adalah deskripsi dari instance komponen Joke dengan properti question dan properti punchLine yang diteruskan ke sana.

Apa yang kita lakukan sekarang dengan berbagai komponen ini? Bereaksi membuatnya sangat nyaman untuk bekerja dengan array seperti itu. Yaitu, kita berbicara tentang fakta bahwa array seperti itu dapat digunakan dalam kode JSX. Berikut tampilannya kode file App :

 import React from "react" import Joke from "./Joke" import jokesData from "./jokesData" function App() {   const jokeComponents = jokesData.map(joke => <Joke question={joke.question} punchLine={joke.punchLine} />)       return (       <div>           {jokeComponents}       </div>   ) } export default App 

Setelah itu, halaman aplikasi akan terlihat sama seperti sebelumnya, namun, Anda akan melihat peringatan berikut di konsol browser:

 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `App`. See https://fb.me/react-warning-keys for more information.   in Joke (at App.js:7)   in App (at src/index.js:6) 

Maknanya bermuara pada fakta bahwa elemen array harus memiliki properti key unik. Kami tidak akan membahas detail mengapa Bereaksi mengharapkan properti key unik dari komponen duplikat. Cukup bagi kami untuk mempertimbangkan fakta bahwa, ketika melakukan pembuatan massal instance komponen, seperti yang baru saja kami lakukan menggunakan metode map() , instance harus melewati properti key . Selain itu, properti seperti itu dapat diteruskan ke instance komponen itu sendiri, dan, misalnya, ke <div> , di mana kode komponen dilampirkan. Ini tidak memainkan peran khusus.

Jadi, properti key perlu diberi nilai unik. Sebagai aturan, dalam objek data yang diterima dari API, ada beberapa pengidentifikasi (properti seperti id ). Hal utama bagi kami adalah keunikannya. Sebagai contoh, kita dapat mengatur properti key ke joke.question - semua teks di properti ini unik dalam aplikasi kita. Tetapi kami akan melakukan sebaliknya. Ingat bagaimana objek dengan data dari array yang kita ekspor dari file jokesData.js . Ini adalah bagiannya:

 const jokesData = [   {       id: 1,       punchLine: "It's hard to explain puns to kleptomaniacs because they always take things literally."   },   {       id: 2,       question: "What's the best thing about Switzerland?",       punchLine: "I don't know, but the flag is a big plus!"   }, ... ] 

Setiap objek memiliki properti id , keunikan yang kami pelihara secara independen. Ini adalah nilai dari properti seperti itu yang dapat digunakan sebagai nilai untuk properti key .

Sekarang kode untuk membuat array instance komponen di App.js akan mengambil bentuk berikut:

 const jokeComponents = jokesData.map(joke => <Joke key={joke.id} question={joke.question} punchLine={joke.punchLine} />) 

Jika Anda membuat perubahan dalam kode ini, lihat halaman aplikasi di browser dan periksa konten konsol, ternyata pemberitahuan tentang properti key telah menghilang.

Setelah semua transformasi yang kami lakukan pada proyek, tampilan halaman aplikasi tidak berubah. Namun, kode komponen App telah menjadi jauh lebih pendek dan lebih jelas, dan data untuk membentuk daftar komponen sekarang diambil dari sesuatu yang sangat menyerupai sumber data eksternal. Dengan cara inilah aplikasi nyata bekerja.

Selain itu, perlu dicatat bahwa inti dari modifikasi kode di atas adalah penggunaan metode array map() standar map() . Kami menggunakan teknik membuat daftar instance dari komponen Joke di komponen App , tetapi tidak ada yang menghalangi kami, jika perlu, dari menggunakan pendekatan yang sama dalam komponen Joke , yang dapat, berdasarkan data yang ditransfer ke dalamnya, membuat daftar instance kami sendiri dari komponen tertentu.

Pada saat yang sama, seperti yang telah kami katakan, di antara metode standar array Anda dapat menemukan alat menarik lainnya. Misalnya, metode sort() dapat digunakan untuk mengurutkan elemen array dengan beberapa atribut. Metode filter() dapat digunakan untuk memilih hanya elemen array yang memenuhi kriteria tertentu. Semua ini berlaku untuk bekerja dengan array yang berisi instance komponen.

Jika mau, Anda dapat mencoba metode ini. Katakanlah coba gunakan metode filter() dan hapus dari output yang dihasilkan oleh komponen App contoh-contoh komponen Joke yang properti question tidak melebihi panjang yang ditentukan. Atau pastikan hanya komponen yang properti properti question dan properti punchLine yang punchLine .

Ringkasan

Hari ini kita berbicara tentang menggunakan metode array map() standar map() untuk mengkompilasi daftar komponen, dan juga membahas kemungkinan yang diberikan metode array standar lain kepada kita. Lain kali Anda akan memiliki pelajaran praktis tentang materi yang dipelajari hari ini.

Pembaca yang budiman! Bagaimana Anda menyelesaikan masalah tampilan oleh komponen App hanya contoh-contoh komponen Joke yang properti pertanyaannya melebihi panjang yang ditentukan?