ReactJSPropsValidierung

Prop-Validierung ist eine effektive Methode, um die korrekte Verwendung von Komponenten zu erzwingen. Dies hilft dabei, zukünftige Fehler und Probleme während der Entwicklung zu vermeiden, wenn die Anwendung größer wird. Es macht den Code auch lesbarer, da wir sehen können, wie jeder Komponente verwendet werden sollte.

Prop-Validierung

App.jsx

import　React　from　'react';
Klasse App erweitert React.Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<h3Array: {this.props.propArray}/h3>
　　　　　　　　　　　　<h3Boolesch: {this.props.propBool ? "Wahr..." : "Falsch..."}/h3>
　　　　　　　　　　　　<h3Funktion: {this.props.propFunc(3}/h3>
　　　　　　　　　　　　<h3Zahl: {this.props.propNumber}/h3>
　　　　　　　　　　　　<h3Zeichenkette: {this.props.propString}/h3>
　　　　　　　　　　　　<h3Objekt: {this.props.propObject.objectName}1}</h3>
　　　　　　　　　　　　<h3Objekt: {this.props.propObject.objectName}2}</h3>
　　　　　　　　　　　　<h3Objekt: {this.props.propObject.objectName}3}</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'));