ReactJS - Props Validation

Xác nhận thuộc tính là một cách hữu ích để buộc sử dụng đúng các component. Điều này sẽ giúp trong quá trình phát triển để tránh các lỗi và sự cố trong tương lai, khi ứng dụng trở nên lớn hơn. Nó cũng làm cho code dễ đọc hơn, vì chúng ta có thể thấy cách sử dụng từng component.

Validating Props

Trong ví dụ này, chúng tôi đang tạo App component với tất cả các props mà chúng tôi cần. App.propTypes được sử dụng để xác thực props. Nếu một số props không sử dụng đúng loại mà chúng tôi đã chỉ định, chúng tôi sẽ nhận được cảnh báo trên bảng điều khiển. Sau khi chúng tôi chỉ định các mẫu xác thực, chúng tôi sẽ đặt App.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'));