Làm thế nào để khai báo Phản ứng PropTypes XOR

Question

tôi sử dụng để viết các thành phần với nhiều cấu hình Ví dụ:

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

Làm thế nào tôi có thể tuyên bố đạo cụ có thể được sử dụng chỉ khi có i snot đã đạo cụ khác thiết lập?

Tùy chọn XOR sẽ hữu ích. Tôi đọc số https://facebook.github.io/react/docs/reusable-components.html nhưng không hiệu quả.

Bất kỳ ý tưởng nào?

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

bạn có thể tạo bất động sản tùy chỉnh:

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

này là trong phản ứng docs https://facebook.github.io/react/docs/reusable-components.html#prop-validation

Answer 3

Tôi đã thử các customProp. Tôi đã nhận được một cái gì đó như thế:

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

Nó đang hoạt động: người dùng phải khai báo bằng hoặc chiều rộngBài đặt và minWidth. Nhưng tôi nghĩ rằng một giải pháp nhúng hơn sẽ dễ dàng tuyên bố và sẽ cải thiện lỗi được nêu ra.

tôi đăng các nhu cầu trên react github