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

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

import React from 'react';
import PropTypes from 'prop-types';
const MyComponent = ({ expandableRows }) => {
  // Component logic here
};
MyComponent.defaultProps = {
  expandableRows: 0, // Set a default value
};
MyComponent.propTypes = {
  expandableRows: PropTypes.number.isRequired,
};
export default MyComponent;

Метод 2. Проверка с использованием PropTypes.oneOfType
Другой метод — использовать PropTypes.oneOfTypeдля указания нескольких допустимых типов реквизитов. Это позволяет вам обрабатывать разные типы реквизита. Вот пример:

import React from 'react';
import PropTypes from 'prop-types';
const MyComponent = ({ expandableRows }) => {
  // Component logic here
};
MyComponent.propTypes = {
  expandableRows: PropTypes.oneOfType([
    PropTypes.array,
    PropTypes.number,
  ]).isRequired,
};
export default MyComponent;

Метод 3: компонент границы ошибок
React предоставляет компонент границы ошибок, который улавливает ошибки JavaScript в своих дочерних компонентах. Обертывая ваши компоненты границей ошибки, вы можете обрабатывать и отображать резервный пользовательский интерфейс при возникновении ошибки типа свойства. Вот пример:

import React from 'react';
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  componentDidCatch(error, errorInfo) {
    // Log error or send it to an error reporting service
  }
  render() {
    if (this.state.hasError) {
      return <div>Error: Failed to render component.</div>;
    }
    return this.props.children;
  }
}
export default ErrorBoundary;

Чтобы использовать компонент Error Boundary, оберните компоненты следующим образом:

<ErrorBoundary>
  <MyComponent expandableRows="invalidProp" />
</ErrorBoundary>

Обработка ошибочных типов свойств имеет решающее значение для поддержания стабильности и надежности ваших приложений React. В этой статье мы рассмотрели различные методы обработки ошибочных типов свойств, включая предоставление значений свойств по умолчанию, использование PropTypes.oneOfType и использование компонента Error Boundary. Реализуя эти методы, вы можете гарантировать, что ваши компоненты корректно обрабатывают ошибки типа свойств и обеспечивают лучшее взаимодействие с пользователем.