条件React PropTypes

Question

我有一个React组件，我想强制提供其中两个道具之一-如果都没有提供，我希望能够触发PropType警告：

MyComponent.propTypes = {
  firstProp: PropTypes.string.isRequired, // required only if `otherProp` not provided
  otherProp: PropTypes.string.isRequired, // required only if `firstProp` not provided
}

我相信AirBnB的prop-types可以做到这一点，但我想知道是否只能使用React PropTypes做到这一点。

Answer 1

所有内容都有一个npm。 Here is one用于基于道具的条件道具类型。这是一个示例，说明了我如何在项目中使用它来确定广告尺寸道具类型。

ProgressBar

Answer 2

使用isRequiredIf。

@evcohen于4年前发布了一个PR，将isRequiredIf添加到了PropTypes库中。不幸的是，即使在那时，他们仍将PropTypes库置于维护模式，并且无法将其合并。

company I work for仍使用PropTypes，因此我们派生了PropTypes库的master分支，并在其中添加了此功能。

现在您可以执行以下操作：

MyComponent.propTypes = {
  firstProp: PropTypes.string.isRequiredIf( props => !props.otherProp ), // required only if `otherProp` not provided
  otherProp: PropTypes.string.isRequiredIf( props => !props.firstProp ), // required only if `firstProp` not provided
}

超级干净，最小。

通过以下内容更新package.json，可以在自己的项目中随意使用our fork：

"prop-types": "github:cntral/prop-types#isRequiredIf"

注意：它不需要布尔参数，只需要传递道具并需要返回布尔值的函数即可。