どのように私は、例えば、複数の構成でコンポーネントを作成するために使用さ

Question

PropTypes XORに反応宣言するには？

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

をこれは私がcustomPropをしようとしたドキュメントhttps://facebook.github.io/react/docs/reusable-components.html#prop-validation

Answer 3

の中に反応しています。それが動作している

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