ReactJS - Xác thực đạo cụ

Xác nhận thuộc tính là một cách hữu ích để buộc sử dụng đúng các thành phần. Đ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 mã dễ đọc hơn, vì chúng ta có thể thấy cách mỗi thành phần nên được sử dụng.

Xác thực Đạo cụ

Trong ví dụ này, chúng tôi đang tạo App thành phần với tất cả props mà chúng tôi cần. App.propTypesđược sử dụng để xác nhận đạo cụ. Nếu một số đạo cụ 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ẽ đặtApp.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'));