Не так давно мой техлид на проекте сказал о том, что есть необязательная, но весьма специфичная и в то же время интересная задача: нужно сделать Error Boundary для обработки неверно пришедших props в компонент. Я на радостях за нее взялся с уверенностью, что в документации уже точно есть такое решение.
Думаю, вы уже поняли, что не все оказалось так просто.
Несколько часов серфинга не дали абсолютно никаких результатов и я осознал, что мне придется лезть внутрь пакета prop-types.
На самом деле было сложно понять, что там творится внутри, но все-таки мое внимание кое-что привлекло, а именно константа ReactPropTypesSecret в
одноименном файле:
var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
Звучит угрожающе, правда?
Я долго не мог понять, что же значит эта константа. Сначала я подумал, что это просто какая-то забавная пасхалка от Facebook, но не тут-то было, у нее и в самом деле есть смысл!
В файле
factoryWithTypeCheckers.js я нашел функцию checkType, которая по сути является тем самым валидатором, который кидает warning в консоль, если в компонент пришли неверные props:
function checkType(isRequired, props, propName, componentName, location, propFullName, secret) {
Обратите внимание на последний аргумент! Если последним аргументом в эту функцию передать константу из файла ReactPropTypesSecret.js, то вместо warning в консоль функция будет возвращать объект ошибки неверных props, либо null, если все верно.
И уже это можно использовать для того, чтобы создать компонент-обработчик ошибок для неверных props.
