React 道具 - 如果另一个道具为空/空，则在道具上设置 isRequired

Question

我有一个组件 <Button>。
如果组件没有 this.props.children，我想将属性 ariaLabel 设置为 isRequired，否则 in 可以是可选的。我该怎么做？

ariaLabel 道具不需要：

<Button>Add to bag</Button>

ariaLabel 属性必须是必需的：

<Button ariaLabel="Add to bag" icon={ favorite } />

如果 this.props.children 和 this.props.ariaLabel 为空，它会抛出一个错误，指出 this.props.ariaLabel 是 isRequired

<Button icon={ favorite } />

属性类型：

Button.propTypes = {
    /** icon inside Button. */
    icon: React.PropTypes.object,
    /** Content inside button */
    children: React.PropTypes.node,
    /** Aria-label to screen readers */
    ariaLabel: React.PropTypes.string, /*isRequired if children is empty */
};

谢谢

Answer 1

这可能正是您所需要的：https://github.com/thejameskyle/react-required-if

在您的情况下，您的 propTypes 将是：

import requiredIf from 'react-required-if';

Button.propTypes = {
    /** icon inside Button. */
    icon: React.PropTypes.object,
    /** Content inside button */
    children: React.PropTypes.node,
    /** Aria-label to screen readers */
    ariaLabel: requiredIf(React.PropTypes.string, props => !props.children), /*isRequired if children is empty */
};

Answer 2

您不需要另一个库，'prop-types' 提供了开箱即用的功能。参见 https://facebook.github.io/react/docs/typechecking-with-proptypes.html

示例：

import PropTypes from 'prop-types';

//.......    

ExampleComponent.propTypes = {
    showDelete: PropTypes.bool,
    handleDelete: function(props, propName, componentName) {
        if ((props['showDelete'] == true && (props[propName] == undefined || typeof(props[propName]) != 'function'))) {
            return new Error('Please provide a handleDelete function!');
        }
    },

}

Answer 3

要添加到上面@chickenchilli 的回答中，您可以将其抽象为更方便的辅助函数，如下所示：

conditionalPropType.js

export default function conditionalPropType(condition, message) {
  if(typeof condition !== 'function') throw "Wrong argument type 'condition' supplied to 'conditionalPropType'";
  return function(props, propName, componentName) {
    if (condition(props, propName, componentName)) {
      return new Error(`Invalid prop '${propName}' '${props[propName]}' supplied to '${componentName}'. ${message}`);
    }
  }
}

MyComponent.js

import PropTypes from 'prop-types';
import conditionalPropType from './conditionalPropType';

[...]

MyComponent.propTypes = {
  conditionProp: PropTypes.bool,
  dependentProp: conditionalPropType(props => (props.condition && typeof(props.someProp) !== 'boolean'), "'dependentProp' must be boolean if 'conditionProp' is true"),
};

Answer 4

使用`isRequiredIf`.

有一个 4 年前的 PR 将 isRequiredIf 添加到 PropTypes 库。不幸的是，即使在那个时候他们也将 PropTypes 库置于维护模式并且不会将其合并。

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

所以现在你可以这样做：

ariaLabel: PropTypes.string.isRequiredIf( props => props.children )

超级干净和简约。

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

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

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

React 道具 - 如果另一个道具为空/空，则在道具上设置 isRequired

React props - set isRequired on a prop if another prop is null / empty

javascript

wai-aria

reactjs

conditionalPropType.js

MyComponent.js

使用`isRequiredIf`.

React 道具 - 如果另一个道具为空/空，则在道具上设置 isRequired

React props - set isRequired on a prop if another prop is null / empty

javascript

wai-aria

reactjs

conditionalPropType.js

MyComponent.js

使用isRequiredIf.

使用`isRequiredIf`.