Menguasai Props Dan PropTypes Dalam React

Apakah props dan PropTypes membingungkan Anda? Kamu tidak sendiri. Saya akan memandu Anda melalui segala sesuatu tentang props dan PropTypes. Mereka dapat membuat hidup Anda jauh lebih mudah saat mengembangkan aplikasi React. Tutorial ini akan memperkenalkan Anda pada detail tentang props, melewati dan mengakses props, dan meneruskan informasi ke komponen apa pun menggunakan props.

Membangun aplikasi React melibatkan pemecahan UI menjadi beberapa komponen, yang menyiratkan bahwa kita perlu meneruskan data dari satu komponen ke komponen lainnya. Props adalah mekanisme penting untuk menyampaikan informasi antara komponen React, dan kita akan membahasnya dengan sangat detail. Artikel ini tidak akan lengkap tanpa melihat ke dalam PropTypes, karena mereka memastikan bahwa komponen menggunakan tipe data yang benar dan meneruskan data yang benar.

Itu selalu merupakan praktik yang baik untuk memvalidasi data yang kami dapatkan sebagai alat peraga dengan menggunakan PropTypes. Anda juga akan belajar tentang mengintegrasikan PropTypes di React, typechecking dengan PropTypes, dan menggunakan defaultProps. Di akhir tutorial ini, Anda akan memahami bagaimana menggunakan props dan PropTypes secara efektif. Penting bagi Anda untuk memiliki pengetahuan dasar tentang cara kerja React.

Memahami Alat Peraga

React memungkinkan kita untuk meneruskan informasi ke komponen menggunakan hal-hal yang disebut props (kependekan dari properties). Karena React terdiri dari beberapa komponen, props memungkinkan untuk berbagi data yang sama di seluruh komponen yang membutuhkannya. Itu menggunakan aliran data satu arah (komponen parent-to-child). Namun, dengan fungsi panggilan balik, props dapat diteruskan kembali dari anak ke komponen induk.

Data ini bisa datang dalam berbagai bentuk: angka, string, array, fungsi, objek, dll. Kita dapat meneruskan props ke komponen apa pun, sama seperti kita dapat mendeklarasikan atribut dalam tag HTML apa pun. Perhatikan kode di bawah ini:

 <PostList posts={postsList} />

Dalam cuplikan ini, kami meneruskan posts bernama prop ke komponen bernama PostList . Prop ini memiliki nilai {postsList} . Mari kita uraikan cara mengakses dan meneruskan data.

Melewati dan Mengakses Alat Peraga

Agar tutorial ini menarik, mari kita buat aplikasi yang menampilkan daftar nama dan postingan pengguna. Demo aplikasi ditunjukkan di bawah ini:

Aplikasi terdiri dari kumpulan komponen: komponen App , komponen PostList , dan komponen Post .

Daftar posting akan membutuhkan data seperti content dan name pengguna. Kita dapat membangun data seperti ini:

 const postsList = [ { id: 1, content: "The world will be out of the pandemic soon", user: "Lola Lilly", }, { id: 2, content: "I'm really exited I'm getting married soon", user: "Rebecca Smith", }, { id: 3, content: "What is your take on this pandemic", user: "John Doe", }, { id: 4, content: "Is the world really coming to an end", user: "David Mark", }, ];

Setelah ini, kita membutuhkan komponen App untuk menarik data, Berikut adalah struktur dasar dari komponen itu:

 const App = () => { return ( <div> <PostList posts={postsList} /> </div> ); };

Di sini, kita melewatkan sebuah array dari posting sebagai prop ke PostList (yang akan kita buat sebentar lagi). Komponen induk, PostList , akan mengakses data di postsList , yang akan diteruskan sebagai props posts ke komponen anak ( Post ). Jika Anda ingat, aplikasi kami terdiri dari tiga komponen, yang akan kami buat saat kami melanjutkan.

Mari kita buat PostList :

 class PostList extends React.Component { render() { return ( <React.Fragment> <h1>Latest Users Posts</h1> <ul> {this.props.posts.map((post) => { return ( <li key={post.id}> <Post {...post} /> </li> ); })} </ul> </React.Fragment> ); } }

Komponen PostList akan menerima posts sebagai penyangganya. Kemudian akan mengulang melalui posts prop, this.props.posts , untuk mengembalikan setiap item yang diposting sebagai komponen Post (yang akan kita modelkan nanti). Perhatikan juga penggunaan key dalam cuplikan di atas. Bagi mereka yang baru mengenal React, kunci adalah pengidentifikasi unik yang ditetapkan untuk setiap item dalam daftar kita, memungkinkan kita untuk membedakan antar item. Dalam hal ini, kuncinya adalah id dari setiap posting. Tidak ada kemungkinan dua item memiliki id yang sama, jadi ini adalah bagian data yang bagus untuk digunakan untuk tujuan ini.

Sementara itu, properti yang tersisa diteruskan sebagai props ke komponen Post ( <Post {...post} /> ).

Jadi, mari kita buat komponen Post dan manfaatkan props di dalamnya:

 const Post = (props) => { return ( <div> <h2>{props.content}</h2> <h4>username: {props.user}</h4> </div> ); };

Kami sedang membangun komponen Post sebagai komponen fungsional, daripada mendefinisikannya sebagai komponen kelas seperti yang kami lakukan untuk komponen PostList . Saya melakukan ini untuk menunjukkan kepada Anda cara mengakses props di komponen fungsional, dibandingkan dengan cara kami mengaksesnya di komponen kelas dengan this.props . Karena ini adalah komponen fungsional, kita dapat mengakses nilai menggunakan props .

Kami telah belajar sekarang bagaimana melewati dan mengakses alat peraga, dan juga bagaimana meneruskan informasi dari satu komponen ke komponen lainnya. Mari kita pertimbangkan sekarang bagaimana alat peraga bekerja dengan fungsi.

Melewati Fungsi Melalui Alat Peraga

Pada bagian sebelumnya, kita melewatkan sebuah array data sebagai props dari satu komponen ke komponen lainnya. Tetapi bagaimana jika kita bekerja dengan fungsi? React memungkinkan kita untuk melewatkan fungsi antar komponen. Ini berguna saat kita ingin memicu perubahan status pada komponen induk dari komponen turunannya. Alat peraga seharusnya tidak berubah; Anda tidak boleh mencoba mengubah nilai prop. Anda harus melakukannya di komponen yang meneruskannya, yang merupakan komponen induk.

Mari buat aplikasi demo sederhana yang mendengarkan acara klik dan mengubah status aplikasi. Untuk mengubah status aplikasi di komponen yang berbeda, kita harus menurunkan fungsi kita ke komponen yang statusnya perlu diubah. Dengan cara ini, kita akan memiliki fungsi dalam komponen anak kita yang dapat mengubah keadaan.

Kedengarannya agak rumit? Saya telah membuat aplikasi React sederhana yang mengubah status dengan mengklik tombol dan memberikan informasi sambutan:

Dalam demo di atas, kami memiliki dua komponen. Salah satunya adalah komponen App , yang merupakan komponen induk yang berisi status aplikasi dan fungsi untuk mengatur status. ChildComponent akan menjadi anak dalam skenario ini, dan tugasnya adalah merender informasi sambutan saat status berubah.

Mari kita uraikan ini menjadi kode:

 class App extends React.Component { constructor(props) { super(props); this.state = { isShow: true, }; } toggleShow = () => { this.setState((state) => ({ isShow: !state.isShow })); }; render() { return ( <div> <ChildComponent isShow={this.state.isShow} clickMe={this.toggleShow} /> </div> ); } }

Perhatikan bahwa kita telah menyetel status ke true , dan metode untuk mengubah status dibuat di komponen App . Dalam fungsi render() , kita meneruskan status aplikasi, sebagai prop isShow , ke komponen ChildComponent . Kami juga meneruskan fungsi toggleShow() sebagai prop bernama clickMe .

Kami akan menggunakan ini di ChildComponent yang terlihat seperti ini:

 class ChildComponent extends React.Component { clickMe = () => { this.props.clickMe(); }; render() { const greeting = "Welcome to React Props"; return ( <div style={{ textAlign: "center", marginTop: "8rem" }}> {this.props.isShow ? ( <h1 style={{ color: "green", fontSize: "4rem" }}>{greeting}</h1> ) : null} <button onClick={this.clickMe}> <h3>click Me</h3> </button> </div> ); } }

Hal terpenting di atas adalah bahwa komponen App mewariskan fungsi sebagai penyangga ke ChildComponent . Fungsi clickMe() digunakan untuk pengendali klik di ChildComponent , sedangkan ChildComponent tidak mengetahui logika fungsi — ia hanya memicu fungsi saat tombol diklik. Status berubah ketika fungsi dipanggil, dan setelah status berubah, status diturunkan sebagai prop lagi. Semua komponen yang terpengaruh, seperti anak dalam kasus kami, akan dirender lagi.

Kita harus meneruskan status aplikasi, isShow , sebagai prop ke ChildComponent , karena tanpanya, kita tidak dapat menulis logika di atas untuk menampilkan greeting saat status diperbarui.

Sekarang kita telah melihat fungsi, mari beralih ke validasi. Itu selalu merupakan praktik yang baik untuk memvalidasi data yang kami dapatkan melalui alat peraga dengan menggunakan PropTypes. Mari selami itu sekarang.

Apa Itu PropTip Dalam Bereaksi?

PropTypes adalah mekanisme untuk memastikan bahwa komponen menggunakan tipe data yang benar dan meneruskan data yang benar, dan bahwa komponen menggunakan tipe prop yang tepat, dan komponen penerima menerima tipe prop yang tepat.

Kita bisa menganggapnya seperti anak anjing yang dikirim ke toko hewan peliharaan. Toko hewan peliharaan tidak menginginkan babi, singa, katak, atau tokek — mereka menginginkan anak anjing. PropTypes memastikan bahwa tipe data yang benar (anak anjing) dikirim ke toko hewan peliharaan, dan bukan jenis hewan lain.

Pada bagian di atas, kita melihat cara menyampaikan informasi ke komponen apa pun menggunakan props. Kami meneruskan props secara langsung sebagai atribut ke komponen, dan kami juga melewatkan props dari luar komponen dan menggunakannya di komponen itu. Tapi kami tidak memeriksa jenis nilai apa yang kami dapatkan di komponen kami melalui alat peraga atau semuanya masih berfungsi.

Terserah kita apakah akan memvalidasi data yang kita dapatkan dalam suatu komponen melalui alat peraga. Namun dalam aplikasi yang kompleks, memvalidasi data itu selalu merupakan praktik yang baik.

Menggunakan PropTypes

Untuk menggunakan PropTypes, kita harus menambahkan paket sebagai dependensi ke aplikasi kita melalui npm atau Yarn, dengan menjalankan kode berikut di baris perintah. Untuk npm:

 npm install --save prop-types

Dan untuk Benang:

 yarn add prop-types

Untuk menggunakan PropTypes, pertama-tama kita perlu mengimpor PropTypes dari paket prop-types:

 import PropTypes from 'prop-types';

Mari gunakan ProTypes di aplikasi kita yang mencantumkan postingan pengguna. Berikut adalah bagaimana kita akan menggunakannya untuk komponen Post :

 Post.proptypes = { id: PropTypes.number, content: PropTypes.string, user: PropTypes.string }

Di sini, PropTypes.string dan PropTypes.number adalah validator prop yang dapat digunakan untuk memastikan bahwa props yang diterima memiliki tipe yang tepat. Dalam kode di atas, kami mendeklarasikan id sebagai angka, sedangkan content dan user adalah string.

Juga, PropTypes berguna dalam menangkap bug. Dan kami dapat menerapkan alat peraga yang lewat dengan menggunakan isRequired :

 Post.proptypes = { id: PropTypes.number.isRequired, content: PropTypes.string.isRequired, user: PropTypes.string.isRequired }

PropTypes memiliki banyak validator. Berikut adalah beberapa yang paling umum:

 Component.proptypes = { stringProp: PropTypes.string, // The prop should be a string numberProp: PropTypes.number, // The prop should be a number anyProp: PropTypes.any, // The prop can be of any data type booleanProp: PropTypes.bool, // The prop should be a function functionProp: PropTypes.func // The prop should be a function arrayProp: PropTypes.array // The prop should be an array }

Tersedia lebih banyak tipe, yang dapat Anda periksa di dokumentasi React].

Alat Peraga Default

Jika kita ingin meneruskan beberapa informasi default ke komponen kita menggunakan props, React mengizinkan kita melakukannya dengan sesuatu yang disebut defaultProps . Dalam kasus di mana PropTypes adalah opsional (yaitu, mereka tidak menggunakan isRequired ), kita dapat mengatur defaultProps . Alat peraga default memastikan bahwa alat peraga memiliki nilai, jika tidak ada yang lolos. Berikut ini contohnya:

 Class Profile extends React.Component{ // Specifies the default values for props static defaultProps = { name: 'Stranger' }; // Renders "Welcome, Stranger": render() { return <h2> Welcome, {this.props.name}<h2> } }

Di sini, defaultProps akan digunakan untuk memastikan bahwa this.props.name memiliki nilai, jika tidak ditentukan oleh komponen induk. Jika tidak ada nama yang diteruskan ke kelas Profile , maka itu akan memiliki properti default Stranger untuk digunakan kembali. Ini mencegah kesalahan apa pun ketika tidak ada prop yang dilewatkan. Saya menyarankan Anda untuk selalu menggunakan defaultProps untuk setiap PropType opsional.

Kesimpulan

Saya harap Anda menikmati bekerja melalui tutorial ini. Mudah-mudahan, ini telah menunjukkan kepada Anda betapa pentingnya props dan propTypes untuk membangun aplikasi React, karena tanpa mereka, kita tidak akan bisa melewatkan data antar komponen saat interaksi terjadi. Mereka adalah bagian inti dari arsitektur berbasis komponen dan manajemen negara yang dirancang oleh React.

PropTypes adalah bonus untuk memastikan bahwa komponen menggunakan tipe data yang benar dan meneruskan data yang benar, dan bahwa komponen menggunakan tipe prop yang tepat, dan komponen penerima menerima tipe prop yang tepat.

Jika Anda memiliki pertanyaan, Anda dapat meninggalkannya di bagian komentar di bawah, dan saya akan dengan senang hati menjawab setiap pertanyaan dan mengatasi masalah apa pun dengan Anda.

Referensi

• “Berpikir dalam Bereaksi”, React Docs
• “Daftar dan Kunci”, Bereaksi Dokumen
• “Pemeriksaan Ketik Dengan PropTypes”, React Docs
• “Cara Melewati Props ke Komponen di React”, Robin Wieruch