От автора: валидация свойств с помощью React PropTypes — полезный способ принудительного использования компонентов. Это поможет избежать во время разработки будущих ошибок и проблем, когда приложение станет больше. Это также делает код более читаемым, так как мы можем видеть, как использовать каждый компонент.
Валидация свойств
В этом примере мы создаем компонент App со всеми реквизитами, которые нам нужны. App.propTypes используется для проверки реквизита. Если некоторые из реквизитов не используют корректный тип, который мы назначили, мы получим предупреждение консоли. После того, как мы укажем шаблоны проверки, мы установим App.defaultProps.
App.jsx
import PropTypes from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom'; class App extends React.Component { render() { return ( <div> <h1> Hello, {this.props.name} </h1> <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> </div> ); }
}
App.propTypes = { name: PropTypes.string, propArray: PropTypes.array.isRequired, propBool: PropTypes.bool.isRequired, propFunc: PropTypes.func, propNumber: PropTypes.number, propString: PropTypes.string,
};
App.defaultProps = { name: 'Tutorialspoint.com', propArray: [1, 2, 3, 4, 5], propBool: true, propFunc: function(e) { return e }, propNumber: 1, propString: "String value..."
}
export default App;
main.js
import React from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import App from './App.jsx'; ReactDOM.render(<App/>, document.getElementById('app'));
webpack.config.js
var config = { entry: './main.js', output: { path:'/', filename: 'index.js', }, devServer: { inline: true, port: 8080 }, externals: { 'react': 'React' }, module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } } ] }
}
module.exports = config;
Поскольку все свойства валидны, мы получим следующий результат.
Как видите, мы используем isRequired при проверке propArray и propBool. Это даст нам ошибку, если один из этих двух не существует. Если мы удалим propArray:[1,2,3,4,5] из объекта App.defaultProps, консоль зарегистрирует предупреждение.
Если мы установим значение propArray: 1, React предупредит нас, что валидация propType не удалась, так как нам нужен массив, а мы получили число.
Источник: https://www.tutorialspoint.com/
Редакция: Команда webformyself.