Jak deklarują React PropTypes XOR

Question

pisałem składniki z wielokrotnej konfiguracji Na przykład:

ResponsiveTable.PropTypes = { 
    width: React.PropTypes.number, //used if widthOffset and minWidth are undefined 
    widthOffset: React.PropTypes.number, //used if width is undefined 
    minWidth: React.PropTypes.number, //used if width is undefined 
}; 

Jak mogę zadeklarować rekwizytów, które mogą być stosowane tylko wtedy, gdy ja snot ustawić już inne rekwizyty?

Przydałaby się opcja XOR. Czytam https://facebook.github.io/react/docs/reusable-components.html, ale to nie pomogło.

Wszelkie pomysły?

Answer 1

Solution:

React.PropTypes.oneOfType([ 
    React.PropTypes.shape({ 
     width: React.PropTypes.number.isRequired 
    }), 
    React.PropTypes.shape({ 
     widthOffset: React.PropTypes.number, 
     minWidth: React.PropTypes.number.isRequired 
    }), 
]) 

Answer 2

można utworzyć właściwość niestandardową:

yourComponent.propTypes = { 
    ... 
    customProp: function(props, propName, componentName) { 
    if(checkValid){ 
     return new Error('validation failed'); 
    } 
    } 
    ... 
} 

to w reakcji docs https://facebook.github.io/react/docs/reusable-components.html#prop-validation

Answer 3

Próbowałem customProp. Mam coś takiego:

/** 
* Configure a React type to be usable only if including ot exclufing other props from component 
* @param {React.PropTypes} propType  current prop type 
* @param {Array} excludedProps names of the props to exclude 
* @param {Array} includedProps name of the props to include 
*/ 
function propTypeXOR(propType,excludedProps,includedProps){ 
    return(props, propName, componentName) =>{ 
    if(props[propName]){ 
     if(typeof props[propName] !== propType){ 
     return new Error("Failed propType: Invalid prop `"+propName+"` of type `"+propType+"` supplied to `"+componentName+"`, expected `number`"); 
     }else{ 
     excludedProps.map((excludedPropName) =>{ 
      if(props[excludedPropName]){ 
      return new Error("forbidden prop `"+excludedPropName+"` was specified in `"+componentName+"` when using the prop `"+propName+"`"); 
      } 
     }) 
     if(includedProps){ 
      includedProps.map((includedPropName) =>{ 
      if(props[includedPropName]){ 
       return new Error("required prop `"+includedPropName+"` was not specified in `"+componentName+"` when using the prop `"+propName+"`"); 
      } 
      }) 
     } 
     } 
    }else{ 
     if(excludedProps){ 
     var error = ""; 
     excludedProps.map((excludedPropName) =>{ 
      if(!props[excludedPropName]){ 
      error+="`"+excludedPropName+"`,"; 
      } 
     }) 
     if(error!=""){ 
      return new Error("required prop `"+propName+"` was not specified in `"+componentName+"`.It is required when props ["+error+"] are not defined."); 
     } 

     } 
    } 
    } 
} 

ResponsiveTable.propTypes = { 
    width: propTypeXOR("number",["widthOffset","minWidth"]), 
    widthOffset: propTypeXOR("number",["width"],["minWidth"]), 
    minWidth: propTypeXOR("number",["width"],["widthOffset"]) 
}; 

To działa: użytkownik musi zadeklarować z lub widthOffset i MinWidth. Ale myślę, że bardziej wbudowane rozwiązanie ułatwi deklarację i poprawi popełniony błąd.

zamieścić zapotrzebowanie na react github