javascript - example - Reaccionar props-establecer isRequired en un prop si otro prop es nulo/vacío

react map object

Question

Tengo un componente <Button> .
Si el componente no tiene this.props.children , quiero configurar el prop ariaLabel como isRequired , de lo contrario, puede ser opcional. ¿Cómo puedo hacer eso?

ariaLabel prop no requiere:

<Button>Add to bag</Button>

ariaLabel prop tiene que ser requerido:

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

si this.props.children y this.props.ariaLabel están vacíos, arroja un error que this.props.ariaLabel que this.props.ariaLabel is 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 */
};

Gracias

Answer 1

Esto puede ser exactamente lo que necesita: https://github.com/thejameskyle/react-required-if

En su caso, sus tipos de propiedad serían:

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

No necesita otra biblioteca, los ''tipos de prop'' proporcionan esto fuera de la caja. Ver https://facebook.github.io/react/docs/typechecking-with-proptypes.html

Ejemplo:

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

Para agregar a la respuesta de @ chickenchilli anterior, puedes abstraer esto en una función de ayuda más práctica como esta:

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