如何聲明作出反應PropTypes XOR

Question

我以前寫有多個配置的部件。例如：

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

我如何可以聲明只有當我鼻涕已經等道具設置使用的道具？

A XOR選項將是有用的。我讀https://facebook.github.io/react/docs/reusable-components.html但它沒有幫助。

任何想法？

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

您可以創建自定義屬性：

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

這是反應文檔https://facebook.github.io/react/docs/reusable-components.html#prop-validation

Answer 3

我試過customProp。我有類似的東西：

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

據工作：用戶必須聲明帶有或widthOffset和minWidth。但我認爲更嵌入式的解決方案將會緩解聲明並提高引發的錯誤。

我張貼在react github