条件反应 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 基于道具的条件道具类型。这是我如何在项目中使用它来确定广告尺寸道具类型的示例。

import React, { Component } from 'react';
import isRequiredIf from 'react-proptype-conditional-require';
import PropTypes from 'prop-types';

class AdSlot extends Component {
  // React component stuff
}

const slotPropTypes = PropTypes.oneOfType([
  PropTypes.string, // e.g. 'fluid'
  PropTypes.arrayOf(PropTypes.number), // e.g. [300, 250]
  PropTypes.arrayOf(PropTypes.array), // e.g. [[300, 250], [1650, 300]]
  PropTypes.arrayOf(PropTypes.oneOfType([ // e.g. ['fluid', [300, 250]]
    PropTypes.string.isRequired,
    PropTypes.array,
  ])),
]);

const responsiveSizesPropTypes = PropTypes.arrayOf(PropTypes.oneOfType([
  PropTypes.number,
  PropTypes.array,
  PropTypes.string,
]));

const doesNotHaveResponsiveSizes = props => !(props.hasOwnProperty('responsiveSizes'));
const doesNotHaveSlotSizes = props => !(props.hasOwnProperty('slotSizes'));

AdSlot.proptypes = {
  slotSizes: isRequiredIf(slotPropTypes, doesNotHaveResponsiveSizes),
  responsiveSizes: isRequiredIf(responsiveSizesPropTypes, doesNotHaveSlotSizes),
}

export default AdSlot;

Answer 2

使用`isRequiredIf`.

4 年前@evcohen 的 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"

注意：它不接受布尔参数，只有一个传递道具的函数需要return一个布尔值。

条件反应 PropTypes

Conditional React PropTypes

reactjs

react-proptypes

使用`isRequiredIf`.

条件反应 PropTypes

Conditional React PropTypes

reactjs

react-proptypes

使用isRequiredIf.

使用`isRequiredIf`.