在自定义验证程序中使用常规的PropTypes检查

问题描述

我从一个非常简单的PropTypes验证开始：

name: PropTypes.string.isrequired,

现在，如果某些其他条件为假，我只需要字符串即可，所以：

name: ({name,otherProp}) => {
  if (otherProp === 'foo') return null;

  if (typeof name === 'string') return null;

  return new Error('Error');
}

在这种情况下哪一个还可以，但是在我的自定义验证器中运行string.isrequired的常规PropTypes检查后，我真正想做的就是第一次检查，例如：

name: ({name,otherProp}) => {
  if (otherProp === 'foo') return null;

  return PropTypes.string.isrequired;
}

似乎PropTypes.checkPropTypes应该有一种方法，但我无法弄清楚。

解决方法

我在仔细研究 Material UI 的代码时发现了一种巧妙的方法来执行与此等效的操作：并行 prop-types 检查。它们有一个非常简单的效用函数 chainPropTypes，如下所示：

export default function chainPropTypes(propType1,propType2) {
  if (process.env.NODE_ENV === 'production') {
    return () => null;
  }

  return function validate(...args) {
    return propType1(...args) || propType2(...args);
  };
}

您可以使用它进行自定义道具类型检查和标准检查。例如like this：

  anchorEl: chainPropTypes(PropTypes.oneOfType([HTMLElementType,PropTypes.func]),(props) => {
    if (props.open && (!props.anchorReference || props.anchorReference === 'anchorEl')) {

// ...

,

您可以编写自己的自定义 PropType，它可以将 PropType 作为参数。

export const myCustomPropType = (propType,otherProp) => {
    return function validate(props,propName,...rest) {
        const originalPropType =  propType(props,...rest);
        if (props[otherProp] === 'foo') return originalPropType;
        if (typeof props[propName] === 'string') return originalPropType;
        return new Error('Error');
    };
};

用法

MyComponent.propTypes {
    myProp: myCustomPropType(PropTypes.string.isRequired,'otherPropName')
}