React Props

  • Post
    React Props

    Props adalah singkatan dari ” Properti .” Mereka adalah komponen read-only . Ini adalah objek yang menyimpan nilai atribut dari sebuah tag dan bekerja mirip dengan atribut HTML. Ini memberi cara untuk meneruskan data dari satu komponen ke komponen lainnya. Ini mirip dengan argumen fungsi. Properti diteruskan ke komponen dengan cara yang sama seperti argumen yang diteruskan dalam suatu fungsi.

    Props tidak dapat diubah sehingga kami tidak dapat memodifikasi props dari dalam komponen. Di dalam komponen, kita dapat menambahkan atribut yang disebut props. Atribut ini tersedia dalam komponen sebagai this.props dan dapat digunakan untuk membuat data dinamis dalam metode render kami.

    Saat Anda membutuhkan data yang tidak dapat diubah dalam komponen, Anda harus menambahkan props ke metode reactDom.render () di file main.js dari proyek ReactJS Anda dan menggunakannya di dalam komponen yang Anda butuhkan. Hal tersebut dapat dijelaskan pada contoh di bawah ini.

    Contoh

    App.js

    1. import React, {Component} dari  ‘react’ ;
    2. class App  extends Component {
    3. render () {
    4. return  (
    5. <h1> Selamat datang di {  this .props.name} </h1>
    6. <p> <h4> Javatpoint adalah salah satu lembaga pelatihan Java terbaik di Noida, Delhi, Gurugram, Ghaziabad, dan Faridabad. </h4> </p>
  • );
  • }
  • }
  • exsport  default App;
  • Main.js

    1. import from   ‘react’ ;
    2. import ReactDOM from  ‘react-dom’ ;
    3. import Aplikasi from ‘./App.js’ ;
    4. render (<App name =  “JavaTpoint !!” />, document.getElementById ( ‘app’ ));

     

    Default Props

    Tidak perlu selalu menambahkan props dalam elemen reactDom.render (). Anda juga dapat menyetel props default langsung pada konstruktor komponen. Hal tersebut dapat dijelaskan pada contoh di bawah ini.

    Contoh

    App.js

    1. import React, {Component} from  ‘react’ ;
    2. class App  exetndsComponent {
    3. render () {
    4. return  (
    5. <h1> Contoh Alat Peraga Default </h1>
    6. <h3> Selamat datang di { this.props.name} </h3>
    7. <p> Javatpoint adalah salah satu lembaga pelatihan Java terbaik di Noida, Delhi, Gurugram, Ghaziabad, dan Faridabad. </p>
    8. );
    9. }
    10. }
    11. defaultProps = {
    12. nama:  “JavaTpoint”
    13. }
    14. export  default App;

    Main.js

    1. import React from  ‘react’ ;
    2. impor ReactDOM from  ‘react-dom’ ;
    3. impor App from  ‘./App.js’ ;
    4. render (<App />, document.getElementById ( ‘app’ ));

     

    State and Props

    Status dan props dapat digabungkan dalam aplikasi Anda. Anda bisa menyetel status di komponen induk dan meneruskannya ke komponen anak menggunakan props. Itu dapat ditunjukkan pada contoh di bawah ini.

    Contoh

    App.js

    1. import React, {Component} dari  ‘react’ ;
    2. class App extends Component {
    3. constructor (props) {
    4. super (props);
    5. this .state = {
    6. nama:  “JavaTpoint” ,
    7. }
    8. }
    9. render () {
    10. return (
    11. <JTP jtpProp = { this .state.name} />
    12. );
    13. }
    14. }
    15. class JTP  extends Component {
    16. render () {
    17. return (
    18. <h1> Contoh Status & Properti </h1>
    19. <h3> Selamat datang di { this .props.jtpProp} </h3>
    20. <p> Javatpoint adalah salah satu lembaga pelatihan Java terbaik di Noida, Delhi, Gurugram, Ghaziabad, dan Faridabad. </p>
    21. );
    22. }
    23. }
    24. export  default App;

    Main.js

    1. import React from  ‘react’ ;
    2. import ReactDOM from  ‘react-dom’ ;
    3. import App from  ‘./App.js’ ;
    4. render (<App />, document.getElementById ( ‘app’ ));

     

     

    React Props Validation

    Properti merupakan mekanisme penting untuk meneruskan atribut read-only ke komponen React. Alat peraga biasanya diperlukan untuk menggunakan komponen dengan benar. Jika tidak digunakan dengan benar, komponen mungkin tidak berfungsi seperti yang diharapkan. Oleh karena itu, diperlukan validasi props dalam meningkatkan komponen react.

    Validasi props adalah alat yang akan membantu pengembang menghindari bug dan masalah di masa mendatang. Ini adalah cara yang berguna untuk memaksa penggunaan komponen Anda dengan benar. Itu membuat kode Anda lebih mudah dibaca. Komponen React menggunakan properti khusus PropTypes yang membantu Anda menangkap bug dengan memvalidasi tipe data nilai yang diteruskan melalui props, meskipun tidak perlu mendefinisikan komponen dengan propTypes. Namun, jika Anda menggunakan propTypes dengan komponen Anda, ini membantu Anda menghindari bug yang tidak terduga.

    Validating Props

    App.propTypes digunakan untuk validasi props dalam komponen react. Ketika beberapa props diteruskan dengan jenis yang tidak valid, Anda akan mendapatkan peringatan di konsol JavaScript. Setelah menentukan pola validasi, Anda akan mengatur App.defaultProps.

    Sintaksis:

    1. class App  extends Component {
    2. render () {}
    3. }
    4. propTypes = {  / * Definition * / };

    ReactJS Props Validator

    Validator props ReactJS berisi daftar validator berikut.

    SN PropsType Deskripsi
    1. PropTypes.any Props bisa dari tipe data apa pun.
    2. PropTypes.array Props harus berupa larik.
    3. PropTypes.bool Props harus berupa boolean.
    4. PropTypes.func Props harus menjadi sebuah fungsi.
    5. PropTypes.number Props harus berupa angka.
    6. PropTypes.object Props harus menjadi objek.
    7. PropTypes.string Props harus berupa tali.
    8. PropTypes.symbol Props harus menjadi simbol.
    9. PropTypes.instanceOf Props  harus merupakan turunan dari kelas JavaScript tertentu.
    10. PropTypes.isRequired Props harus disediakan.
    11. PropTypes.element Props harus berupa elemen.
    12. PropTypes.node Props dapat merender apa saja: angka, string, elemen, atau larik (atau fragmen) yang berisi tipe ini.
    13. PropTypes.oneOf () Props harus menjadi salah satu dari beberapa jenis nilai tertentu.
    14. PropTypes.oneOfType ([PropTypes.string, PropTypes.number]) Props harus menjadi objek yang bisa menjadi salah satu dari banyak jenis.

    Contoh

    Di sini, kami membuat komponen App yang berisi semua props yang kami butuhkan. Dalam contoh ini, App.propTypes digunakan untuk validasi props. Untuk alat peraga validasi, Anda harus harus menambahkan baris ini: PropTypes impor dari ‘prop-types’ di App.js file .

    App.js

    1. import React, {Component} from  ‘react’ ;
    2. import PropTypes from  ‘prop-types’ ;
    3. class App extends Component {
    4. render () {
    5. return  (
    6. <h1> Contoh validasi ReactJS Props </h1>
    7. <tabel>
    8. Type
    9. Value
    10. Valid
    11. Array
    12. this .props.propArray}
    13. this .props.propArray? “true” :  “False” }
    14. Boolean
    15. this .props.propBool? “true” :  “False” }
    16. this .props.propBool? “true” :  “False” }
    17. Function
    18. this .props.propFunc ( 5 )}
    19. this .props.propFunc ( 5 )? “true” :  “False” }
    20. String
    21. this.props.propString}
    22. this.props.propString? “true” :  “False” }
    23. Number
    24. this.props.propNumber}
    25. this.props.propNumber? “true” :  “False” }
    26. );
    27. }
    28. }
    29. propTypes = {
    30. propArray: PropTypes.array.isRequired,
    31. propBool: PropTypes.bool.isRequired,
    32. propFunc: PropTypes.func,
    33. propNumber: PropTypes.number,
    34. propString: PropTypes.string,
    35. }
    36. defaultProps = {
    37. propArray: [ 1 , 2 , 3 , 4 , 5 ],
    38. propBool:  True
    39. propFunc: function (x) { return x + 5 },
    40. propNumber:  1 ,
    41. propString:  “JavaTpoint” ,
    42. }
    43. export  default app;

    Main.js

    1. import React from  ‘react’ ;
    2. import ReactDOM from  ‘react-dom’ ;
    3. import App from  ‘./App.js’ ;
    4. render (<App />, document.getElementById ( ‘app’ ));

    Keluaran:

    ReactJS Custom Validators

    ReactJS memungkinkan pembuatan fungsi validasi kustom untuk melakukan validasi kustom. Argumen berikut digunakan untuk membuat fungsi validasi kustom.

    • props: Ini harus menjadi argumen pertama dalam komponen.
    • propName: Ini adalah propName yang akan divalidasi.
    • componentName: Ini adalah componentName yang akan divalidasi lagi.

    Contoh

    1. var Component = React.createClass ({
    2. propTypes = {
    3. customProp: function (props, propName, componentName) {
    4. if  (! item.isValid (props [propName])) {
    5. return new Error ( ‘Validasi gagal!’ );
    6. }
    7. }
    8. }
    9. })

     

    credit. javatpoint

     

    Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Tagged: 

  • You must be logged in to reply to this topic.