使用React道具类型，可以验证字符串是否包含某些东西吗？

Question

我有一个带有颜色道具的按钮组件。颜色属性可以是“主要”，“次要”或十六进制颜色，例如“＃0000ff”。当然colour: PropTypes.string可以，但是理想情况下，我需要检查随机字符串。是否可能出现以下情况？

Button.propTypes = {
  colour: PropTypes.oneOf(['primary', 'secondary', PropTypes.string.includes('#')]),
};

或用于检查字符串的最长7个字符且第一个字符为'＃'的函数？

Answer 1

您可以编写自己的验证器。

请参阅React docs了解更多详细信息。

---

Button.propTypes = {
  colour: function(props, propName, componentName) {
    if (props[propName] !== 'primary' &&
        props[propName] !== 'secondary' &&
        !/^#[a-zA-Z]{6}$/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Must be a valid color code.'
      );
    }
  }
}