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

Question

我有一个组件 <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 } />

---

属性类型:

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

您不需要其他库，'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!');
        }
    },

}