React rekwizyty - zestaw isRequired na podpórce, jeśli inny podpór jest pusty/pusty

Question

Mam komponent <Button>.
Jeśli komponent nie ma this.props.children, chcę ustawić prop ariaLabel jako isRequired, w przeciwnym razie może być opcjonalne. Jak mogę to zrobić?

ariaLabel prop nie wymagane:

<Button>Add to bag</Button> 

---

ariaLabel prop musi być wymagane:

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

---

jeśli this.props.children i this.props.ariaLabel są puste, to zgłasza błąd mówiąc, że this.props.ariaLabel jest 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 */ 
}; 

Dzięki

Answer 1

To może być dokładnie to, czego potrzebujesz: https://github.com/thejameskyle/react-required-if

W twoim przypadku, twoje propTypes byłoby:

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

Nie trzeba inną bibliotekę, „prop-typy” zapewnia to po wyjęciu z pudełka. Zobacz https://facebook.github.io/react/docs/typechecking-with-proptypes.html

Przykład:

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!'; 
      ); 
     } 
    }, 

}