Мастерство реагирует Proptypes

React’s Proptypes является мощным инструментом для разработчиков при создании своих проектов. Его можно использовать для проверки данных, которые компонент получает в качестве входных данных. И убедитесь, что это то, что ожидалось.

Модуль Proptypes содержит набор функций для проверки типов данных, передаваемых как реквизит. И вернуть ошибки, когда проверка не удается. Наиболее распространенным вариантом использования является тестирование того, что требуемые реквизиты предоставляются детскими компонентами.

Proptypes – это внутренний механизм React, чтобы проверить, получает ли компонент правильные типы. Компоненты React Используйте свойство под названием Proptypes Чтобы настроить проверку типов. Это может быть сделано как для функциональных, так и для классовых компонентов.

import React from "react";
import PropTypes from "prop-types";

const Person = ({ name, age }) => {
  return (
    
      {name}
      {age}
    
  );
};

Person.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
};

export default Person;

Когда дело доходит до поддерживаемых типов. Пакет Proptypes предлагает предопределенные функции проверки. Они охватывают большинство обычных типов. И для более сложных подтверждений у нас также есть возможность определять пользовательские валидаторы.

Основные типы

Это валидаторы для основных типов данных:

Proptypes. any – Опора может быть чем угодно
Proptypes.bool – Опора должна быть истинный или ЛОЖЬ
Proptypes.number – Опора должна быть любым количество
Proptypes.string – Опора должна быть любым нить
Proptypes.func – Опора должна быть функцией
Proptypes.array – Опора должна быть Множество
Proptypes.object – Опора должна быть Объект
Proptypes.symbol – Опора должна быть Условное обозначение

Person.propTypes = {
  hobby: PropTypes.any,
  male: PropTypes.bool,
  age: PropTypes.number,
  name: PropTypes.string,
  secretTalent: PropTypes.func,
  friends: PropTypes.array,
  wallet: PropTypes.object,
  skill: PropTypes.symbol,
};

Визуализируемые типы

Проверка визуализации типов может ли оформлена оформлена с помощью React. Мы можем указать, если PROP это элемент React (т.е. ) или что -нибудь еще (т.е. струны, числа и т. Д.)

Proptypes.Element – реагировать элемент
Proptypes.node – Все, что может быть отображено. Числа, струны, элементы или массив

Blog.propTypes = {
  blogTitle: PropTypes.element,
  blogBody: PropTypes.node,
};

Типы экземпляров

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

Типы сбора

Валидаторы сбора пригодятся, когда нам нужно проверить содержание массива. Это позволяет нам проверить и проверять содержимое массивов или объектов.

Proptypes.arrayof – Массив определенных элементов
Proptypes.shape – объект, содержащий определенные свойства (могут содержать дополнительные свойства)
Proptypes.exact – Объект, содержащий только определенные свойства (не может содержать дополнительные свойства)

Person.propTypes = {
  friends: PropTypes.arrayOf(PropTypes.string),
  father: PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number,
  }),
  dog: PropTypes.exact({
    name: PropTypes.string,
    age: PropTypes.number,
  }),
};

Требуемые типы

Все реквизит необязательны по умолчанию. Чтобы гарантировать, что определенная опора всегда передается. Мы можем пометить это по мере необходимости, используя Isrequired валидатор.

Person.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
  friends: PropTypes.arrayOf(PropTypes.string),
};

Пользовательские валидаторы

В некоторых случаях нам нужно написать пользовательские валидаторы. Хорошим примером этого является проверка, если пройдет PROP является действительным адресом электронной почты.

Мы можем определить пользовательский валидатор как функцию, которая принимает 3 аргумента и возвращает Ошибка Когда проверка не удается.

Person.propTypes = {
  email: (props, propName, componentName) => {
    // Regex to test if email is correct
    if (!/^[^\s@]+@[^\s@]+$/.test(props[propName])) {
      return new Error(
        `Invalid prop "${propsName}" supplied to "${componentName}"`
      );
    }
  },
};

Обеспечение значений по умолчанию

Это просто определить значения по умолчанию для компонента реквизит . Мы можем сделать это, назначив их DefaultProps свойство. Следующий пример будет установлен EnglishSpeaker к истинный Если мы забудем установить опору.

Person.propTypes = {
  englishSpeaker: PropTypes.bool,
};

Person.defaultProps = {
  englishSpeaker: true,
};

React Proptypes Проверьте, являются ли типы правильными во время выполнения. Это означает, что нам нужно запустить наше приложение, чтобы проверить, правильные ли типы. Кроме того, он проверяет только типы компонентов, которые отображаются. Если какой -то компонент получил неправильный тип. Мы увидим предупреждение в консоли.

Как это трудоемкая задача. Он поддерживается только в режиме разработки. Так что посмотрите на консоль во время развития. Потому что вы не увидите предупреждения в производстве!

Proptypes дает нам много функций, чтобы проверить, получает ли компонент правильный реквизит. Это хороший способ быстро представить тип проверки в проекты React. И сделать приложение более стабильным. Тем не менее, это не идеальный выбор для крупномасштабных проектов.

По мере того, как проект становится все больше, в консоли легко пропустить предупреждения. И ввести нежелательных ошибок в систему. В этих сценариях мы должны рассмотреть проверку статического типа, используя такие инструменты, как Поток или TypeScript Анкет

Оригинал: “https://dev.to/codewithbernard/mastering-react-proptypes-3a1h”

{name}