Question

在React propTypes中，是否可以指定必须提供一个道具或另一个道具？

例如，如果未提供django.forms，则必须提供myPropA。

Docs似乎没有解决方法。

Answer 1

您可以为myPropA指定一个可选的prop类型，然后为myPropB提供一个自定义的验证prop函数。您可以按照所需的任何结构提供所需的任何自定义错误消息。您可以使用函数参数（例如prop名称和组件名称）来构建此消息。此示例还仅使用属性名称myPropA / myPropB，而不引入其他自定义属性键/名称。

import React from 'react';
import PropTypes from 'prop-types';

const Hello = ({ name, myPropA, myPropB }) => <h1>Hello {name}!</h1>;

Hello.propTypes = {
  myPropA: PropTypes.string,
  myPropB: function(props, propName, componentName) {
    // required validation
    if(!props.myPropA && !props.myPropB) {
      return new Error(`Failed prop type: The prop '${propName}' is required in '${componentName}' when prop 'myPropA' is 'undefined', but it's value is '${props[propName]}'.`);
    }

    // string validation
    if(!props.myPropA && props.myPropB && typeof props.myPropB !== 'string') {
      return new Error(`Failed prop type: Invalid prop ${propName} of type '${typeof props[propName]}' supplied to ${componentName}, expected 'string'.`);
    }
  },
};

export default Hello;

这里是example的动作。

希望有帮助！

Answer 2

是的，有办法。您可以添加自己的自定义验证功能。

const propTypes = {
    customProp: function(props, propName, componentName) {
      if ( !("myPropA" in props) && !("myPropB" in props) ) {
        return new Error(
        "Invalid prop"
      );
    }
  }
}

JSFiddle：Link

您可以指定必须至少提供一组道具吗？

2 个答案: