Можно ли проверить типы пропов как нечувствительные к регистру в типах пропов в React?

Question

Интересно, есть ли способ проверить нечувствительность к регистру типов опор в React. По сути, решение должно заменить следующий код. Насколько я проверил, в официальной документации prop-types решения нет.

Brand.propTypes = {
    name: PropTypes.oneOf([
        'google',
        'Google',
        'GOOGLE'
    ])
}

Answer 1

Из React PropTypes Docs :

// You can also specify a custom validator. It should return an Error
// object if the validation fails. Don't `console.warn` or throw, as this
// won't work inside `oneOfType`.
customProp: function(props, propName, componentName) {
  if (!/matchme/.test(props[propName])) {
    return new Error(
      'Invalid prop `' + propName + '` supplied to' +
      ' `' + componentName + '`. Validation failed.'
    );
  }
},

Итак, имея это в виду, вы можете написать свой собственный собственный сопоставитель, подобный этому, который позаботится о ваших требованиях:

const matchesCaseInsensitiveString = (matchingString) => {
  const matchingStringLower = matchingString.toLowerCase();
  return (props, propName, componentName) => {
    const propValue = props[propName];
    if (typeof propValue !== "string" || props[propName].toLowerCase() !== matchingStringLower) {
      return new Error('Expected ' + matchingStringLower + ' but got ' + propValue);
    }
  }
}

// example
const propTypes = {
  google: matchesCaseInsensitiveString('GOOGLE'),
  yahoo: matchesCaseInsensitiveString('Yahoo'),
};

const props = {
  google: 'google',
  yahoo: 'Bing',
};

console.log(
  propTypes.google(props, 'google', 'MyFakeComponent')
); // won't return an error

console.log(
  propTypes.yahoo(props, 'yahoo', 'MyFakeComponent')
); // will return an error

Это немного грубо (по умолчанию используется проверка соответствия типа .isRequired и есть довольно элементарное предупреждение), но вы получаете приблизительное представление о том, как это можно сделать .