ReactJS - walidacja rekwizytów
Walidacja właściwości jest użytecznym sposobem wymuszenia prawidłowego użycia komponentów. Pomoże to podczas programowania, aby uniknąć przyszłych błędów i problemów, gdy aplikacja stanie się większa. Dzięki temu kod jest bardziej czytelny, ponieważ możemy zobaczyć, jak powinien być używany każdy komponent.
Sprawdzanie rekwizytów
W tym przykładzie tworzymy App składnik ze wszystkimi props że potrzebujemy. App.propTypessłuży do sprawdzania poprawności właściwości. Jeśli niektóre właściwości nie używają prawidłowego typu, który przypisaliśmy, otrzymamy ostrzeżenie konsoli. Po określeniu wzorców walidacji ustawimyApp.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'));