ReactJS - Requisitenvalidierung
Die Überprüfung der Eigenschaften ist eine nützliche Methode, um die korrekte Verwendung der Komponenten zu erzwingen. Dies hilft während der Entwicklung, zukünftige Fehler und Probleme zu vermeiden, sobald die App größer wird. Es macht den Code auch besser lesbar, da wir sehen können, wie jede Komponente verwendet werden sollte.
Requisiten validieren
In diesem Beispiel erstellen wir App Komponente mit allen props das brauchen wir. App.propTypeswird zur Validierung von Requisiten verwendet. Wenn einige der Requisiten nicht den richtigen Typ verwenden, den wir zugewiesen haben, erhalten wir eine Konsolenwarnung. Nachdem wir Validierungsmuster angegeben haben, werden wir festlegenApp.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'));