Валидация props ReactJS

Валидация свойств — это эффективный метод для обеспечения правильного использования компонента. Это поможет избежать ошибок и проблем в процессе разработки, когда приложение становится больше. Это также делает код более читаемым, так как мы можем видеть, как каждый компонент должен использоваться.

Проверка свойств

App.jsx

import React from 'react';
class　App　extends　React.Component　{
　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h3>Массив:　{this.props.propArray}</h3>
　　　　　　　　　　　　<h3>Логическое значение:　{this.props.propBool　?　"True..."　:　"False..."}</h3>
　　　　　　　　　　　　<h3>Функция:　{this.props.propFunc(3)}</h3>
　　　　　　　　　　　　<h3>Число:　{this.props.propNumber}</h3>
　　　　　　　　　　　　<h3>Строка:　{this.props.propString}</h3>
　　　　　　　　　　　　<h3>Объект:　{this.props.propObject.objectName1}</h3>
　　　　　　　　　　　　<h3>Объект:　{this.props.propObject.objectName2}</h3>
　　　　　　　　　　　　<h3>Объект:　{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'));