ReactJS - Validasi Alat Peraga

Validasi properti adalah cara yang berguna untuk memaksa penggunaan komponen yang benar. Ini akan membantu selama pengembangan untuk menghindari bug dan masalah di masa depan, setelah aplikasi menjadi lebih besar. Itu juga membuat kode lebih mudah dibaca, karena kita dapat melihat bagaimana setiap komponen harus digunakan.

Memvalidasi Alat Peraga

Dalam contoh ini, kami sedang membuat App komponen dengan semua props yang kita butuhkan. App.propTypesdigunakan untuk validasi alat peraga. Jika beberapa alat peraga tidak menggunakan jenis yang benar yang kami tetapkan, kami akan mendapatkan peringatan konsol. Setelah kami menentukan pola validasi, kami akan mengaturApp.defaultProps.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h3>Array: {this.props.propArray}</h3>
            <h3>Bool: {this.props.propBool ? "True..." : "False..."}</h3>
            <h3>Func: {this.props.propFunc(3)}</h3>
            <h3>Number: {this.props.propNumber}</h3>
            <h3>String: {this.props.propString}</h3>
            <h3>Object: {this.props.propObject.objectName1}</h3>
            <h3>Object: {this.props.propObject.objectName2}</h3>
            <h3>Object: {this.props.propObject.objectName3}</h3>
         </div>
      );
   }
}

App.propTypes = {
   propArray: React.PropTypes.array.isRequired,
   propBool: React.PropTypes.bool.isRequired,
   propFunc: React.PropTypes.func,
   propNumber: React.PropTypes.number,
   propString: React.PropTypes.string,
   propObject: React.PropTypes.object
}

App.defaultProps = {
   propArray: [1,2,3,4,5],
   propBool: true,
   propFunc: function(e){return e},
   propNumber: 1,
   propString: "String value...",
   
   propObject: {
      objectName1:"objectValue1",
      objectName2: "objectValue2",
      objectName3: "objectValue3"
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));