reactjs - 您能否指定必须提供一组道具中的至少一个道具？

Question

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

例如，如果myPropA未提供，则必须提供myPropB.

文档似乎没有为此的方法。

标签： reactjsreact-proptypes

Answer 1

您可以为 指定可选的道具类型myPropA，然后为 提供自定义验证道具功能myPropB。您可以在所需的任何结构中提供您想要的任何自定义错误消息。您可以使用道具名称和组件名称等函数参数来构建此消息。此示例还仅使用属性名称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;

这是一个实际的例子。

希望这会有所帮助！