React Tutorial Bagian 10: Workshop Bekerja dengan Properti Komponen dan Gaya

Hari ini, di bagian kesepuluh dari terjemahan kursus pelatihan Bereaksi, kami sarankan agar Anda menyelesaikan tugas praktis bekerja dengan sifat-sifat komponen dan gaya mereka.



→ 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 20. Workshop. Properti Komponen, Styling

→ Asli

▍ pekerjaan

1. Buat proyek aplikasi Bereaksi baru.
2. Tampilkan komponen Aplikasi pada halaman aplikasi, yang kodenya harus dalam file terpisah.
3. Komponen App harus menampilkan 5 komponen Joke berisi lelucon. Keluarkan komponen-komponen ini seperti yang Anda inginkan.
4. Setiap komponen Joke harus menerima dan memproses properti question , untuk bagian utama dari lelucon, dan properti punchLine , untuk frasa kunci.

▍ Tugas tambahan

Beberapa lelucon sepenuhnya terdiri dari frase kunci. Sebagai contoh: "Sulit untuk menjelaskan permainan kata-kata kepada kleptomaniacs karena mereka selalu menganggap segala sesuatu secara literal." Pertimbangkan bagaimana komponen Joke hanya bisa menampilkan properti punchLine ke sana, jika properti question tidak disetel. Percobaan dengan menata komponen Anda.

OlSolusi

Tugas utama

File index.js akan terlihat cukup akrab:

 import React from "react" import ReactDOM from "react-dom" import App from "./App" ReactDOM.render(<App />,   document.getElementById("root")) 

Berikut adalah kode untuk file App.js :

 import React from "react" import Joke from "./Joke" function App() {   return (       <div>           <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 

Harap perhatikan bahwa karena file komponen Joke terletak di folder yang sama dengan file komponen App , kami mengimpornya dengan import Joke from "./Joke" . Kami mengembalikan beberapa elemen dari App , jadi kami harus membungkus semua output dalam tag tertentu, misalnya, dalam <div> . Untuk instance komponen, kami meneruskan properti question dan punchLine .

Berikut adalah kode untuk file Joke.js :

 import React from "react" function Joke(props) {   return (       <div>           <h3>Question: {props.question}</h3>           <h3>Answer: {props.punchLine}</h3>           <hr/>       </div>   ) } export default Joke 

Di sini, ketika mendeklarasikan fungsi Joke , kami menentukan parameter props . Ingatlah bahwa itu adalah nama yang digunakan sesuai dengan tradisi yang ada. Sebenarnya, itu bisa apa saja, tetapi lebih baik menyebutnya props .

Kami mengembalikan beberapa elemen dari komponen - oleh karena itu mereka terlampir dalam <div> . Menggunakan props.question dan props.punchLine kita mengakses properti yang diteruskan ke instance komponen ketika itu dibuat. Properti ini menjadi properti dari objek props . Mereka dilampirkan dalam kurung kurawal karena fakta bahwa kode JavaScript yang digunakan dalam markup JSX harus dilampirkan dalam kurung kurawal. Jika tidak, sistem akan menggunakan nama variabel sebagai teks biasa. Setelah sepasang elemen <h3> , di mana salah satu teks utama lelucon ditampilkan, dan yang lain - frasa kuncinya, ada elemen <hr/> yang menggambarkan garis horizontal. Garis seperti itu akan ditampilkan setelah setiap lelucon, memisahkannya.

Seperti inilah proyek aplikasi di VSCode.


Aplikasi dalam VSCode

Ini halaman aplikasi.


Halaman aplikasi di browser

Tugas tambahan

Ingatlah bahwa tujuan utama dari tugas tambahan adalah untuk mengatur kesimpulan lelucon yang benar, yang seluruhnya terdiri dari frase kunci. Ini diungkapkan dalam kenyataan bahwa ketika membuat turunan dari komponen Joke , hanya properti punchLine yang punchLine , dan properti question tidak dilewati. Membuat instance komponen seperti itu terlihat seperti ini:

 <Joke   punchLine="It's hard to explain puns to kleptomaniacs because they always take things literally." /> 

Jika Anda meletakkan kode ini di bagian atas kode yang dikembalikan oleh komponen App , halaman aplikasi akan terlihat seperti ini.


Halaman aplikasi yang dibentuk dengan tidak benar

Jelas, masalah di sini adalah bahwa, meskipun properti question tidak diteruskan ke komponen, ini menampilkan teks yang mendahului bagian utama dari setiap lelucon, setelah itu tidak ada output.

Ke depan, kami mencatat bahwa di bagian selanjutnya dari kursus kita akan berbicara tentang rendering bersyarat. Menggunakan pendekatan ini untuk rendering, Anda dapat secara efektif menyelesaikan masalah seperti kami. Sementara itu, kami akan mencoba menggunakan alat styling style. Yaitu, kami akan memastikan bahwa jika properti question tidak diteruskan ke komponen, fragmen yang sesuai dari markup JSX yang dikembalikan olehnya tidak akan ditampilkan pada halaman. Berikut ini adalah kode lengkap untuk komponen Joke , yang mengimplementasikan salah satu pendekatan yang mungkin untuk menyelesaikan masalah kami menggunakan CSS:

 import React from "react" function Joke(props) {   return (       <div>           <h3 style={{display: props.question ? "block" : "none"}}>Question: {props.question}</h3>           <h3>Answer: {props.punchLine}</h3>           <hr/>       </div>   ) } export default Joke 

Kami menetapkan elemen pertama <h3> gaya, yang ditentukan selama instantiasi komponen berdasarkan pada kehadiran properti props.question dalam objek. Jika properti ini di objek, elemen mengambil display: block gaya display: block dan ditampilkan pada halaman; jika tidak, display: none dan tidak ditampilkan pada halaman. Penggunaan konstruksi semacam itu akan menghasilkan efek yang sama:

 <h3 style={{display: !props.question && "none"}}>Question: {props.question}</h3> 

Di sini, display: none gaya yang ditetapkan ke elemen jika objek props tidak memiliki properti question , jika tidak, tidak ada yang ditugaskan ke properti display .

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


Penanganan komponen yang tepat dari situasi di mana properti pertanyaan tidak diteruskan ke situ

Anda mungkin memperhatikan bahwa semua elemen yang dibentuk oleh komponen Joke terlihat sama. Mari kita pikirkan bagaimana memilih orang-orang yang hanya melewati properti punchLine . Kami akan memecahkan masalah ini menggunakan gaya bawaan, dan pendekatan yang kami periksa di atas. Berikut adalah kode yang diperbarui untuk komponen Joke :

 import React from "react" function Joke(props) {   return (       <div>           <h3 style={{display: !props.question && "none"}}>Question: {props.question}</h3>           <h3 style={{color: !props.question && "#888888"}}>Answer: {props.punchLine}</h3>           <hr/>       </div>   ) } export default Joke 

Dan inilah yang sekarang muncul di halaman aplikasi.


Mendesain item yang berbeda dari yang lain

Sekarang kami telah bekerja pada komponen Joke , itu menjadi lebih fleksibel dan lebih cocok untuk digunakan kembali.

Ringkasan

Dalam pelajaran praktis ini, kami mengembangkan keterampilan dalam mentransfer properti ke komponen. Jika Anda menganalisis kode dalam contoh yang diberikan di sini, Anda akan melihat bahwa untuk menghasilkan beberapa blok markup yang serupa, Anda harus terus menulis fragmen berulang dari kode JSX. Dalam pelajaran berikutnya, kita akan berbicara tentang cara mengotomatiskan pembentukan halaman tersebut menggunakan alat JavaScript standar, sambil memisahkan markup dan data.

Pembaca yang budiman! Jika solusi Anda untuk masalah-masalah lokakarya ini berbeda dari yang diusulkan, silakan beri tahu kami.