#4 Валидация react props с помощью PropTypes

poster
В этом уроке мы разберем как валидировать react props с помощью PropTypes.
Понравилось? Поделитесь с друзьями!
Понравилось?
Поделитесь с друзьями!
Комментарии
Текст видео

Всем привет. В этом уроке мы разберем валидацию компонентов с помощью PropTypes. PropTypes - это очень классная штука. Идея в том, чтобы описать какие типы данные и значения может принимать компонента на вход, чтобы если ей передали неправильные значения, вывалилась ошибка.

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

Давайте попробуем. Добавим в наш компонент Header PropTypes.

static propTypes = {
};

и импортируем PropTypes из реакта.

import React, { Component, PropTypes } from 'react';

Теперь мы хотим описать, что в наш компонент обязательно должен приходить массив items.

static propTypes = {
  items: PropTypes.array.isRequired
};

Мы указали, что items должен быть типа array, а isRequired показывает, что эти данные нужно передавать обязательно.

Если мы посмотрим в браузер, то никаких ошибок сейчас в консоли нет. Давайте попробуем убрать items из параметров компонента.

warning.js:36 Warning: Failed prop type: Required prop `items` was not specified in `Header`.

И мы сразу получили warning, что items не были переданы в компонент.

Давайте попробуем передать items типа string.

warning.js:36 Warning: Failed prop type: Invalid prop `items` of type `string` supplied to `Header`, expected `array`.

Этот warning говорит нам, что тип должен быть array а не string. Эти сообщение очень помогают, когда ты пытаешься использовать компоненту в первый раз и не знаешь, что ей передать.

Давайте рассмотрим самые популярные проверки типов.

isLoading: PropTypes.bool

Это означает, что компонента может принимать на вход isLoading булевого типа. Но не обязательно переменная должна быть.

submit: PropTypes.func

Здесь мы описали, что на вход нужно обязательно передать функцию submit.

title: PropTypes.string.isRequired

Здесь обязательный тайтл.

Но это еще не все так как это просто типы данные. Еще можно валидировать сами данные. Например

type: PropTypes.oneOf(['news', 'photos'])

То есть здесь мы описали, что хотим получить type либо значения news, либо photos.

И два последних, которые позволяют отлично валидировать массивы и обьекты

user: PropTypes.shape({
  name: PropTypes.string,
  age: PropTypes.number
})

Здесь мы описали, что хотим получить юзера с полями name и age, которые будут типов string и number соответственно.

Если же мы хотим провалидировать массив юзеров, то можно записать это так.

users: PropTypes.arrayOf(
  PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number
  })
)

Этим мы ожидаем, что у нас будет массив обьектов с правильными данными.

Только зарегистрированные пользователи могут оставлять комментарии.  Войдите, пожалуйста.
Mikhael Macherkevich
2 месяцев назад
Привет! Теперь так делать похоже нельзя: https://reactjs.org/warnings/dont-call-proptypes.html
monsterlessons
2 месяцев назад
Привет. Можно, но только для аннотации компонентов. Вы не можете руками вызывать проптайпы как функцию var apiShape = PropTypes.shape({ body: PropTypes.object, statusCode: PropTypes.number.isRequired }).isRequired; // Not supported! var error = apiShape(json, 'response');
Mikhael Macherkevich
2 месяцев назад
Реакт ругался на пример из урока: static propTypes = { items: PropTypes.array.isRequired }; П.С. Спасибо за уроки, всё очень нравится.
Anomatopeya
9 месяцев назад
По моему, самые лучшие уроки на ютубе по реакту. Огромное спасибо!!!. И сайт у вас просто бомбезный, сразу видно что на реакте сделан. Zato Prosto верно подметил, ток я этот комментарий увидел после того как с помощью гугла решил у себя эту проблему.
monsterlessons
9 месяцев назад
Спасибо, очень приятно.
Moe Green
11 месяцев назад
да, действительно валидация props в React мощнее и гибче, чем в Vue. Очень похоже на то, как это делается в Typescript (имею первоначальное представление о ts).
Zato Prosto
1год назад назад
На всякий случай напишу: prpop types, начиная с 15.5 версии реакта, вынесли в отдельный npm-пакет https://reactjs.org/docs/typechecking-with-proptypes.html - установка npm install --save prop-types - сам пакет https://www.npmjs.com/package/prop-types - подключение import PropTypes from 'prop-types';
Tofik Abdullayev
10 месяцев назад
спасибо, сэкономили мне уйму времени)
Rustam Apaev
1год назад назад
Снова спасибо, классные уроки, вот осваиваю новую серию после ES6. Одно замечание небольшое - из видео не совсем ясно, что за служебное слово static. (загуглить не проблема конечно)
monsterlessons
1год назад назад
Спасибо. Постараюсь в будущем обьяснять.
Rustam Apaev
1год назад назад
да, всегда объясняете обычно, каждое новое слово поэтому заметил в этот раз :-) хотя я в ES6 пропустил последний урок про промисы, может там это говорилось)
monsterlessons
1год назад назад
Нет там не было. Иногда у меня случается, что я забываю обьяснить какие-то вещи в видео, так как для меня они само собой разумеющиеся, потому что я пишу их каждый день.