web-dev-qa-db-ja.com

React props-別のpropがnull / emptyの場合、propにisRequiredを設定します

コンポーネント<Button>があります。
コンポーネントにthis.props.childrenがない場合、prop ariaLabelをisRequiredとして設定します。そうでない場合、inはオプションになります。それ、どうやったら出来るの？

ariaLabel propは必要ありません：

<Button>Add to bag</Button>

ariaLabel propは必須である必要があります：

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

this.props.childrenおよびthis.props.ariaLabelが空の場合、this.props.ariaLabelはisRequiredであるというエラーをスローします

<Button icon={ favorite } />

propTypes：

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 */
};

ありがとう

javascriptreactjswai-aria
32
sandrina-p

別のライブラリは必要ありません。「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!');
        }
    },

}
87
chickenchilli

これはまさにあなたが必要とするものかもしれません： 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 */
};
15
Kelvin De Moya

上記の@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"),
};
5
coconup