Di bagian terjemahan React tutorial hari ini, kita akan berbicara tentang properti komponen. Ini adalah salah satu konsep terpenting yang tercermin dalam perpustakaan 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 komponenBagian 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 kursusPelajaran 19. Properti Komponen dalam Bereaksi
→
AsliBuat proyek baru menggunakan
create-react-app dan ubah kode beberapa file standar dari folder
src .
Berikut adalah kode untuk file
index.js :
import React from "react" import ReactDOM from "react-dom" import "./index.css" import App from "./App" ReactDOM.render(<App />, document.getElementById("root"))
Berikut adalah gaya yang dijelaskan dalam file
index.css :
body { margin: 0; } .contacts { display: flex; flex-wrap: wrap; } .contact-card { flex-basis: 250px; margin: 20px; } .contact-card > img { width: 100%; height: auto; } .contact-card > h3 { text-align: center; } .contact-card > p { font-size: 12px; }
Berikut adalah kode yang ditemukan di file
App.js :
import React from "react" function App() { return ( <div className="contacts"> <div className="contact-card"> <img align="center" src="http://placekitten.com/300/200"/> <h3><font color="#3AC1EF">▍Mr. Whiskerson</font></h3> <p>Phone: (212) 555-1234</p> <p>Email: mr.whiskaz@catnap.meow</p> </div> <div className="contact-card"> <img align="center" src="http://placekitten.com/400/200"/> <h3><font color="#3AC1EF">▍Fluffykins</font></h3> <p>Phone: (212) 555-2345</p> <p>Email: fluff@me.com</p> </div> <div className="contact-card"> <img align="center" src="http://placekitten.com/400/300"/> <h3><font color="#3AC1EF">▍Destroyer</font></h3> <p>Phone: (212) 555-3456</p> <p>Email: ofworlds@yahoo.com</p> </div> <div className="contact-card"> <img align="center" src="http://placekitten.com/200/100"/> <h3><font color="#3AC1EF">▍Felix</font></h3> <p>Phone: (212) 555-4567</p> <p>Email: thecat@hotmail.com</p> </div> </div> ) } export default App
Beginilah tampilan aplikasi ini di browser.
Halaman aplikasi di browserSetelah menganalisis kode dan tampilan aplikasi, kita dapat menyimpulkan bahwa alangkah baiknya menggunakan komponen khusus untuk menampilkan kartu dengan informasi tentang hewan. Sekarang elemen-elemen ini dibentuk melalui komponen
App . Mengingat apa yang kita bicarakan di kelas sebelumnya, Anda dapat melangkah lebih jauh - pikirkan komponen universal yang dapat dikustomisasi dengan mengirimkan atribut atau properti ke dalamnya.
Dalam aplikasi kami ada kartu dengan gambar kucing, nama dan informasi kontak pemiliknya (atau mungkin sendiri) - telepon dan alamat email. Untuk membuat komponen yang nantinya akan menjadi dasar untuk semua kartu tersebut, Anda dapat mengambil salah satu fragmen markup yang dikembalikan oleh komponen
App . Sebagai contoh - ini:
<div className="contact-card"> <img align="center" src="http://placekitten.com/300/200"/> <h3><font color="#3AC1EF">▍Mr. Whiskerson</font></h3> <p>Phone: (212) 555-1234</p> <p>Email: mr.whiskaz@catnap.meow</p> </div>
App mengembalikan empat blok tersebut, yang masing-masing dapat digunakan untuk membuat komponen independen, tetapi pendekatan ini tidak cocok untuk kita. Oleh karena itu, kami akan membuat satu komponen yang akan menjadi dasar dari semua kartu yang ditampilkan oleh aplikasi. Untuk melakukan ini, buat file komponen baru di folder
src -
ContactCard.js dan masukkan kode yang mengembalikan elemen
<div> yang dikembalikan oleh komponen
App , kode yang diberikan di atas. Berikut adalah kode untuk komponen
ContactCard :
import React from "react" function ContactCard() { return ( <div className="contact-card"> <img align="center" src="http://placekitten.com/300/200"/> <h3><font color="#3AC1EF">▍Mr. Whiskerson</font></h3> <p>Phone: (212) 555-1234</p> <p>Email: mr.whiskaz@catnap.meow</p> </div> ) } export default ContactCard
Jelas bahwa jika Anda membuat beberapa instance dari komponen ini, maka semuanya akan berisi data yang sama, karena data ini di-kode dalam kode komponen. Dan kami ingin itu, ketika membuat contoh berbeda dari komponen ini, kami dapat menyesuaikan data yang ditampilkan olehnya. Intinya adalah bahwa komponen tersebut dapat melewati properti tertentu, yang kemudian dapat ia gunakan.
Kami bekerja dengan komponen fungsional, yang merupakan fungsi JS biasa, di mana, berkat perpustakaan Bereaksi, konstruksi khusus dapat digunakan. Seperti yang Anda ketahui, fungsi dapat mengambil argumen, meskipun mereka dapat digunakan tanpa argumen.
ContactCard komponen
ContactCard kami, dalam bentuk yang sekarang ada, dapat berupa fungsi sederhana sehingga, tanpa menerima apa pun, cukup kembalikan jumlah dari dua angka:
function addNumbers() { return 1 + 1 }
Ini dapat digunakan untuk mengetahui jumlah angka 1 dan 1, tetapi, misalnya, untuk menambahkan 1 dan 2, menggunakan fungsi yang tidak menerima input apa pun, kita harus menulis fungsi baru. Sangat jelas bahwa pendekatan ini akan menyebabkan ketidaknyamanan yang sangat besar jika Anda perlu menambahkan angka yang berbeda, jadi dalam situasi seperti itu akan lebih bijaksana untuk membuat fungsi universal untuk menambahkan angka yang mengambil dua angka dan mengembalikan jumlahnya:
function addNumbers(a, b) { return a + b }
Apa fungsi yang dikembalikan akan tergantung pada argumen apa yang diteruskan ke sana ketika dipanggil. Dengan membuat komponen Bereaksi, kita dapat melakukan dengan cara yang persis sama.
Kami mengimpor komponen
App.js ContactCard dan mengembalikan empat
ContactCard , tanpa menghapus kode yang membentuk kartu pada halaman aplikasi untuk saat ini:
import React from "react" import ContactCard from "./ContactCard" function App() { return ( <div className="contacts"> <ContactCard /> <ContactCard /> <ContactCard /> <ContactCard /> <div className="contact-card"> <img align="center" src="http://placekitten.com/300/200"/> <h3><font color="#3AC1EF">▍Mr. Whiskerson</font></h3> <p>Phone: (212) 555-1234</p> <p>Email: mr.whiskaz@catnap.meow</p> </div> <div className="contact-card"> <img align="center" src="http://placekitten.com/400/200"/> <h3><font color="#3AC1EF">▍Fluffykins</font></h3> <p>Phone: (212) 555-2345</p> <p>Email: fluff@me.com</p> </div> <div className="contact-card"> <img align="center" src="http://placekitten.com/400/300"/> <h3><font color="#3AC1EF">▍Destroyer</font></h3> <p>Phone: (212) 555-3456</p> <p>Email: ofworlds@yahoo.com</p> </div> <div className="contact-card"> <img align="center" src="http://placekitten.com/200/100"/> <h3><font color="#3AC1EF">▍Felix</font></h3> <p>Phone: (212) 555-4567</p> <p>Email: thecat@hotmail.com</p> </div> </div> ) } export default App
Sekarang mari kita bekerja pada kode yang digunakan untuk instantiate komponen
ContactCard . Dengan membuat elemen HTML biasa, kita dapat menyesuaikan atribut mereka yang memengaruhi perilaku dan penampilan mereka. Nama-nama atribut ini dikodekan oleh standar. Dalam hal komponen, Anda dapat menggunakan pendekatan yang sama persis, dengan satu-satunya perbedaan adalah bahwa kami menciptakan sendiri nama atribut, dan memutuskan sendiri bagaimana mereka akan digunakan dalam kode komponen.
Masing-masing kartu berisi empat informasi, yang, dari kartu ke kartu, dapat berubah. Ini adalah gambar kucing dan namanya, serta alamat telepon dan email. Biarkan nama kucing terkandung di properti
name , alamat gambar di properti
imgURL , telepon di properti
phone , dan alamat email di properti
email .
Kami menyetel properti ini ke instance komponen
ContactCard dan, saat kami mentransfer data dari kode yang sudah ada di
App , kami akan menghapus fragmen yang sesuai. Akibatnya, kode komponen
App akan terlihat seperti ini:
import React from "react" import ContactCard from "./ContactCard" function App() { return ( <div className="contacts"> <ContactCard name="Mr. Whiskerson" imgUrl="http://placekitten.com/300/200" phone="(212) 555-1234" email="mr.whiskaz@catnap.meow" /> <ContactCard name="Fluffykins" imgUrl="http://placekitten.com/400/200" phone="(212) 555-2345" email="fluff@me.com" /> <ContactCard name="Destroyer" imgUrl="http://placekitten.com/400/300" phone="(212) 555-3456" email="ofworlds@yahoo.com" /> <ContactCard name="Felix" imgUrl="http://placekitten.com/200/100" phone="(212) 555-4567" email="thecat@hotmail.com" /> </div> ) } export default App
Benar, hanya transfer properti ke komponen tidak cukup untuk digunakan di dalamnya. Halaman, yang akan dibentuk oleh komponen
App atas, akan berisi empat kartu identik, data yang diatur dalam kode komponen
ContactCard , yang belum tahu apa yang harus dilakukan dengan properti yang ditransfer ke dalamnya.
Data kartu hardcoded dalam kode, komponen tidak dapat bekerja dengan properti yang diteruskan ke sanaJadi sekarang saatnya untuk berbicara tentang bagaimana komponen
ContactCard dapat bekerja dengan properti yang diteruskan ke dalamnya ketika ia dipakai.
Kami melanjutkan untuk menyelesaikan masalah ini dengan menunjukkan, ketika mendeklarasikan fungsi
ContactCard , ia menerima parameter
props . Dalam hal ini, kode komponen akan terlihat seperti ini:
import React from "react" function ContactCard(props) { return ( <div className="contact-card"> <img align="center" src="http://placekitten.com/300/200"/> <h3><font color="#3AC1EF">▍Mr. Whiskerson</font></h3> <p>Phone: (212) 555-1234</p> <p>Email: mr.whiskaz@catnap.meow</p> </div> ) } export default ContactCard
Sebenarnya, parameter ini bisa disebut apa saja yang Anda suka, tetapi dalam Bereaksi itu biasa menyebutnya
props , dan properti yang kita bicarakan di sini sering disebut hanya "props".
Parameter
props adalah objek. Properti objek ini adalah properti yang diteruskan ke komponen saat instantiated. Misalnya, di objek properti kami akan ada properti properti.
props.name berisi nama kucing yang diteruskan ke komponen saat ia dipakai. Selain itu, ia akan memiliki properti
props.imgUrl ,
props.phone ,
props.email . Untuk memverifikasi ini, tambahkan perintah
console.log(props) di awal fungsi
ContactCard .
import React from "react" function ContactCard(props) { console.log(props) return ( <div className="contact-card"> <img align="center" src="http://placekitten.com/300/200"/> <h3><font color="#3AC1EF">▍Mr. Whiskerson</font></h3> <p>Phone: (212) 555-1234</p> <p>Email: mr.whiskaz@catnap.meow</p> </div> ) } export default ContactCard
Ini akan membawa objek
props diterima oleh komponen ke konsol.
Objek alat peraga konsolDi sini Anda dapat melihat output dari empat objek dari
ContactCard.js . Ada begitu banyak dari mereka karena kami membuat empat contoh komponen
ContactCard .
Semua ini memberi kita kesempatan untuk digunakan dalam kode komponen, alih-alih nilai-nilai hard-coded, apa yang diteruskan ke sana saat membuat instance-nya, tersedia dalam bentuk
props objek
props .
Bagaimana jika kita mencoba menggunakan properti
props.imgUrl ini:
<img align="center" src=props.imgUrl/>
Sekilas, konstruksi seperti itu mungkin berhasil, tetapi ingat bahwa di sini kita perlu menggunakan entitas dari JavaScript dalam kode JSX. Kami berbicara tentang bagaimana hal ini dilakukan di salah satu kelas sebelumnya. Yaitu, dalam kasus kami, properti objek harus dilampirkan dalam kurung:
<img align="center" src={props.imgUrl}/>
Kami memproses elemen-elemen lain yang dikembalikan oleh komponen dengan cara yang sama, setelah itu kodenya akan mengambil bentuk berikut:
import React from "react" function ContactCard(props) { return ( <div className="contact-card"> <img align="center" src={props.imgUrl}/> <h3><font color="#3AC1EF">▍{props.name}</font></h3> <p>Phone: {props.phone}</p> <p>Email: {props.email}</p> </div> ) } export default ContactCard
Harap perhatikan bahwa di bidang untuk menampilkan telepon dan alamat email, kami meninggalkan teks
Phone: and
Email: dengan spasi mengikutinya, karena teks-teks ini digunakan di semua komponen. Jika sekarang Anda melihat halaman aplikasi, Anda akan melihat bahwa itu berisi empat kartu yang berbeda.
Halaman dibentuk menggunakan komponen universalKomponen kami hanya menerima empat properti. Bagaimana jika suatu komponen harus lulus, misalnya, 50 properti? Mungkin melewati masing-masing properti seperti garis terpisah, seperti yang dilakukan dalam komponen
App , akan merepotkan. Dalam kasus seperti itu, Anda dapat menggunakan cara lain untuk mentransfer properti ke komponen. Terdiri dari fakta bahwa saat membuat turunan komponen, ia tidak ditransfer daftar properti, tetapi objek dengan properti. Begini tampilannya pada contoh komponen pertama:
import React from "react" import ContactCard from "./ContactCard" function App() { return ( <div className="contacts"> <ContactCard contact={{ name: "Mr. Whiskerson", imgUrl: "http://placekitten.com/300/200", phone: "(212) 555-1234", email: "mr.whiskaz@catnap.meow" }} /> <ContactCard name="Fluffykins" imgUrl="http://placekitten.com/400/200" phone="(212) 555-2345" email="fluff@me.com" /> <ContactCard name="Destroyer" imgUrl="http://placekitten.com/400/300" phone="(212) 555-3456" email="ofworlds@yahoo.com" /> <ContactCard name="Felix" imgUrl="http://placekitten.com/200/100" phone="(212) 555-4567" email="thecat@hotmail.com" /> </div> ) } export default App
Ini bukan untuk mengatakan bahwa pendekatan ini secara signifikan mengurangi jumlah kode yang digunakan untuk menggambarkan instance komponen. Faktanya adalah bahwa sifat-sifat yang diteruskan ke komponen masih sulit dikodekan dalam kode, meskipun kami hanya meneruskan satu komponen ke komponen. Keuntungan dari pendekatan ini dapat dirasakan dalam situasi di mana data untuk komponen diperoleh dari beberapa sumber eksternal. Misalnya, dari file JSON.
Selama modifikasi kode komponen
App digunakan untuk membuat instance pertama dari komponen
ContactCard , operasi aplikasi yang benar terganggu. Beginilah tampilan halamannya sekarang.
Kerusakan aplikasiBagaimana ini bisa diperbaiki? Untuk memahami hal ini, akan berguna untuk menganalisis apa yang terjadi dengan menggunakan perintah
console.log(props) .
Analisis objek alat peragaSeperti yang Anda lihat, objek
props dari komponen pertama berbeda dari objek yang sama dari komponen kedua dan selanjutnya.
Dalam komponen
ContactCard kami menggunakan objek
props berdasarkan asumsi bahwa ia memiliki
name ,
imgUrl , dan properti lainnya. Di sini, komponen pertama hanya menerima satu properti -
contact . Ini mengarah pada fakta bahwa objek
props hanya memiliki satu properti -
contact , yang merupakan objek, dan kode komponen tidak memberikan pekerjaan dengan struktur seperti itu.
Mengubah komponen kita menjadi model dengan menggunakan hanya satu properti dari objek
contact mengandung properti lain cukup sederhana. Untuk melakukan ini, misalnya, untuk mengakses properti
name , cukup menggunakan konstruk formulir
props.contact.name dalam kode komponen. Desain serupa memungkinkan kita bekerja dengan baik dengan properti lain yang kita butuhkan.
Mari mendaur ulang kode komponen, dengan mempertimbangkan transfernya dari satu
contact objek-properti yang mengandung properti lain:
import React from "react" function ContactCard(props) { console.log(props) return ( <div className="contact-card"> <img align="center" src={props.contact.imgUrl}/> <h3><font color="#3AC1EF">▍{props.contact.name}</font></h3> <p>Phone: {props.contact.phone}</p> <p>Email: {props.contact.email}</p> </div> ) } export default ContactCard
Komponen pertama sekarang harus ditampilkan secara normal, tetapi kami tidak akan melihat ini pada tahap proyek ini, karena sistem akan memberi tahu kami banyak kesalahan yang terkait dengan fakta bahwa beberapa contoh komponen
ContactCard dibuat dalam komponen
App tidak menerima properti- objek
contact . Saat menjalankan kode, properti ini
undefined akan
undefined . Akibatnya, upaya dilakukan untuk merujuk ke properti tertentu dari nilai yang
undefined , yang mengarah ke kesalahan. Kami akan memperbaikinya dengan memproses kode komponen
App bertanggung jawab untuk pembentukan komponen
ContactCard :
import React from "react" import ContactCard from "./ContactCard" function App() { return ( <div className="contacts"> <ContactCard contact={{ name: "Mr. Whiskerson", imgUrl: "http://placekitten.com/300/200", phone: "(212) 555-1234", email: "mr.whiskaz@catnap.meow" }} /> <ContactCard contact={{ name: "Fluffykins", imgUrl: "http://placekitten.com/400/200", phone: "(212) 555-2345", email: "fluff@me.com" }} /> <ContactCard contact={{ name: "Destroyer", imgUrl: "http://placekitten.com/400/300", phone: "(212) 555-3456", email: "ofworlds@yahoo.com" }} /> <ContactCard contact={{ name: "Felix", imgUrl: "http://placekitten.com/200/100", phone: "(212) 555-4567", email: "thecat@hotmail.com" }} /> </div> ) } export default App
Sekarang halaman aplikasi akan terlihat sama seperti sebelumnya.
Seperti biasa, Anda disarankan untuk bereksperimen dengan konsep yang telah Anda pelajari hari ini untuk lebih memahami mereka. Misalnya, Anda dapat bekerja dengan kode, menambahkan properti baru yang diteruskan ke komponen, dan mencoba menggunakannya dalam komponen.
Ringkasan
Hari ini kami memperkenalkan konsep properti yang dapat diteruskan ke komponen Bereaksi untuk mengendalikan perilaku dan penampilan mereka. Properti ini menyerupai atribut elemen HTML, tetapi, dengan menggunakan properti dalam komponen, pemrogram memutuskan sendiri arti apa yang mereka miliki dan apa yang harus dilakukan dengan elemen tersebut di dalam komponen. Lain kali Anda akan mendapat pelajaran praktis tentang bekerja dengan properti komponen dan gaya.
Pembaca yang budiman! Bagaimana Anda bereksperimen dengan kode untuk contoh hari ini untuk lebih memahami sifat-sifat komponen Bereaksi?