条件反应proptypes

Question

我认为，Airbnb的

prop-types

是可能的，但我想知道这是否只能使用React Proptypes进行。
    

有一切的NPM。基于道具的条件道具类型是其中的一个。这是我如何在项目中使用它来确定广告大小道具类型的示例。

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 1

使用isRequiredIf @4年前，@evcohen有一个

Pr

，将

isRequiredIf

Answer 2

company i为

仍然使用proptypes，因此我们分配了proptypes库的分支，并在其中添加了此功能。

现在您可以做这样的事情：

master

super清洁和最小。 FEAL免费使用fork在您自己的项目中使用fork，通过以下内容更新您的项目：

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
}

注：它不使用布尔参数，只有通过道具并需要返回布尔值的函数。

原来的问题可能是关于JavaScript React的，但是如果您正在编写TS React代码并让打字稿检查道具类型，则可以使用歧视类型的Union来描述您的需求。

package.json

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

您可以将此实现应用于许多不同的情况。例如，如果您通过10个道具，但您只想接受其中的一些道具，则需要确定实现中的

type MyComponentProps =
    | { firstProp?: string, otherProp?: never }
    | { firstProp?: never, otherProp?: string }

变量

<MyComponent /> // OK!
<MyComponent firstProp="..."/> // OK!
<MyComponent otherProp="..."/> // OK!
<MyComponent firstProp="..." otherProp="..."/> // TS Error!

我想分享我的解决方案，用于在单个Prop值上使用条件预兆。哪种情况是哪种并接收

count

。

Answer 3

MyComponent.propTypes = {
  firstProp: PropTypes.string,
  otherProp: PropTypes.string,
  // we are destructuring the props
  checkOnlyOneVariant: ({ firstProp, otherProp }) => {
    const count = Number(!!firstProp) + Number(!!otherProp);
    // if you passed both, count will be 2. but we do not want count to be greater than 1
    if (count > 1) {
      return new Error("MyComponent accepts either of firstProp or otherProp");
    }
  },
};

numax希望这将帮助一些同样怀疑的人！
    

Answer 4