В чём смысл использовать `React.PropTypes.shape()` внутри `React.PropTypes.arrayOf()`, и как это реализовать, чтобы определить массив объектов с конкретными свойствами в React-компоненте?

Определение

PropTypes.arrayOf() с shape() — это метод валидации в React, который проверяет, что массив содержит объекты с конкретной структурой. Это комбинация двух валидаторов, которая позволяет контролировать и тип данных, и поля объекта.

Когда это использовать

Используй этот паттерн, когда передаёшь массив объектов в компонент, где каждый объект должен иметь одинаковые и чётко определённые поля. Это даёт проверку типов во время выполнения и помогает ловить баги на этапе разработки.

Синтаксис и пример

Как это работает

• arrayOf() — проверяет, что проп является массивом
• shape() — задаёт обязательные поля и их типы для каждого объекта в массиве
• isRequired на поле — делает конкретное поле обязательным внутри каждого объекта
• isRequired на массив — делает весь проп обязательным для компонента

Практический пример

Если компонент получает данные вроде:

PropTypes проверит, что каждый объект в массиве содержит оба поля — color (строка) и fontSize (число).

Современное замечание

В примере используется устаревший API React.PropTypes, тогда как в современных проектах на React подключают отдельный пакет prop-types с тем же синтаксисом — это лучше сказывается на оптимизации и поддержке кода.