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

我如何声明只有在我已经设置了其他道具的情况下才可以使用的道具？

XOR选项将非常有用。我看了https://facebook.github.io/react/docs/reusable-components.html，但没有帮助。

有什么想法吗？

Answer 1

我尝试了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

上发布了需求

Answer 2

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 3

您可以创建自定义属性：

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

中

如何声明React PropTypes XOR

3 个答案: