使用 React prop-types 是否可以验证字符串是否包含某些内容？

Question

我有一个带有颜色道具的按钮组件。颜色属性可以是 'primary'、'secondary' 或十六进制颜色，例如“#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' &&
        !/^#[0-9a-fA-F]{6}$/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Must be a valid color code.'
      );
    }
  }
}

使用 React prop-types 是否可以验证字符串是否包含某些内容？

With React prop-types is it possible to validate on whether a string contains something?

reactjs

react-proptypes