反应道具 - 如果另一个道具为空/空，则需要一个道具

Question

我有一个组件<Button>。
如果组件没有this.props.children，我想设置道具ariaLabel为isRequired，否则可以是可选的。我怎么做？不需要

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

---

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

感谢

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

你并不需要另一个库，“丙类”提供了这种开箱即用。 见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!'; 
      ); 
     } 
    }, 

}