React JS PropTypes — Валидация свойств

React JS PropTypes — Валидация свойств

От автора: валидация свойств с помощью React PropTypes — полезный способ принудительного использования компонентов. Это поможет избежать во время разработки будущих ошибок и проблем, когда приложение станет больше. Это также делает код более читаемым, так как мы можем видеть, как использовать каждый компонент.

Валидация свойств

В этом примере мы создаем компонент App со всеми реквизитами, которые нам нужны. App.propTypes используется для проверки реквизита. Если некоторые из реквизитов не используют корректный тип, который мы назначили, мы получим предупреждение консоли. После того, как мы укажем шаблоны проверки, мы установим App.defaultProps.

App.jsx

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

main.js

webpack.config.js

Поскольку все свойства валидны, мы получим следующий результат.

Как видите, мы используем isRequired при проверке propArray и propBool. Это даст нам ошибку, если один из этих двух не существует. Если мы удалим propArray:[1,2,3,4,5] из объекта App.defaultProps, консоль зарегистрирует предупреждение.

Если мы установим значение propArray: 1, React предупредит нас, что валидация propType не удалась, так как нам нужен массив, а мы получили число.

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

ReactJS: основы

Изучите основы ReactJS и создайте ваше первое приложение на ReactJS с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree