Если вы разработчик React, возможно, вы столкнулись с ужасной ошибкой «отсутствует при проверке реквизитов» при использовании ESLint с правилом react/prop-typesв вашем проекте. Эта ошибка возникает, когда вы забываете определить или опустить необходимое свойство при проверке свойства вашего компонента. В этой статье мы рассмотрим несколько способов устранения этой ошибки и поддержания чистоты и отсутствия ошибок в вашей кодовой базе. Итак, приступим!

Метод 1: определение типов свойств
Самый простой способ устранить эту ошибку — определить типы свойств для свойств вашего компонента. PropTypes — это способ проверки типов и наличия свойств, передаваемых компоненту. Вот пример:

import PropTypes from 'prop-types';
function MyComponent({ name }) {
  // Component logic
}
MyComponent.propTypes = {
  name: PropTypes.string.isRequired,
};

Определив nameв качестве обязательного строкового свойства с помощью PropTypes.string.isRequired, мы гарантируем, что свойство будет передано правильно, и ESLint не выдаст сообщение «отсутствует при проверке реквизита». ” ошибка.

Метод 2: использование значений реквизитов по умолчанию.
Другой подход – указать значения по умолчанию для реквизитов с помощью свойства defaultProps. Таким образом, если свойство не передано компоненту явно, оно вернется к значению по умолчанию. Вот пример:

import PropTypes from 'prop-types';
function MyComponent({ name }) {
  // Component logic
}
MyComponent.propTypes = {
  name: PropTypes.string,
};
MyComponent.defaultProps = {
  name: 'John Doe',
};

В этом примере, если свойство nameне указано при использовании MyComponent, по умолчанию будет установлено значение 'John Doe'. Это гарантирует прохождение проверки свойств и позволяет избежать ошибки ESLint.

function MyComponent({ name }) {
  // eslint-disable-next-line react/prop-types
  return <div>{name}</div>;
}

Добавляя комментарий eslint-disable-next-line react/prop-types, вы даете ESLint указание игнорировать отсутствующую проверку свойства nameв следующей строке. Однако важно использовать этот метод экономно и только при необходимости, так как это может привести к потенциальным ошибкам или проблемам с удобством обслуживания.

В этой статье мы рассмотрели несколько методов устранения ошибки «отсутствует при проверке реквизитов» в React. Определив PropTypes, используя значения свойств по умолчанию или используя выборочное отключение комментариев ESLint, вы можете эффективно обрабатывать проверку свойств и обеспечивать чистую и безошибочную кодовую базу. Не забудьте выбрать метод, который лучше всего соответствует требованиям вашего проекта. Приятного кодирования!