Pelajari cara mengonfigurasi definisi propTypes komponen kustom di YiDA dan bagaimana properti yang dapat dikonfigurasi meningkatkan fleksibilitas komponen agar selaras dengan kebutuhan bisnis.
Komponen kustom mendukung definisi properti (propTypes) yang memperkaya komponen pada level properti. Menambahkan properti kustom meningkatkan tingkat kustomisasi sekaligus membuat komponen lebih fleksibel dan lebih selaras dengan kebutuhan bisnis, seperti ditunjukkan di bawah ini:Properti komponen dapat ditambahkan melalui tombol “Add Item”, diubah melalui tombol “Edit”, atau dihapus melalui tombol “Delete”. Klik tombol “Edit” untuk melihat seluruh item konfigurasi sebuah properti komponen, seperti ditunjukkan di bawah ini.Semua definisi properti komponen kustom dapat dilihat dan dikonfigurasi pada halaman Component Preview (untuk debugging tipe properti sederhana) atau setelah komponen dipasang di dalam aplikasi (untuk konfigurasi properti kompleks, termasuk debugging terkait kode), seperti ditunjukkan di bawah ini.Deskripsi rinci untuk setiap item konfigurasi disediakan di bawah ini.
Nama properti yang dikonfigurasi untuk komponen kustom. Nilai Default dari Judul properti adalah “Property Title”. Judul yang jelas dan intuitif membantu pengguna memahami arti properti atau mengidentifikasi konten yang perlu mereka masukkan.Ketika komponen ini digunakan pada suatu halaman, tampilannya seperti di bawah ini:
Nama properti sebuah komponen adalah Key properti, mirip dengan props.xxx pada sebuah class. Nilai default-nya adalah propName. Anda dapat mengikat variabel di Page Design untuk mengendalikan komponen. Sebagai contoh, nilai properti dari komponen kustom dapat digunakan sebagai Judul komponen yang disarangkan di dalamnya, seperti ditunjukkan di bawah ini.
Catatan: Nama properti sebuah komponen tidak boleh kosong; jika kosong, akan terjadi kesalahan saat komponen dipanggil atau diberi nilai.
Tipe properti sebuah komponen mirip dengan tipe data umum. Terdapat tujuh tipe: Teks, boolean, Angka, object, array, Fungsi, dan Element. Setiap tipe data berkorespondensi dengan beberapa setter untuk memenuhi kebutuhan pengguna dalam memproses data pada dimensi yang berbeda, seperti ditunjukkan di bawah ini.
Komponen dengan tipe properti yang berbeda memiliki setter properti yang berbeda pula, yang mendukung metode rendering komponen dan pemrosesan data yang berbeda. Sebagai contoh, tipe Teks berkorespondensi dengan lima setter, seperti ditunjukkan di bawah ini.