如何在 React 组件 PropTypes 中定义替代的必需属性？

Question

这是用例：组件TableGroup应要求用户指定data属性，该属性是要在表中呈现的对象数组或 requestDataUrl组件将从其中获取该对象数组的属性。简而言之，这两个属性中的一个是必需的，但不是两者都需要。我如何在以下component.propTypes对象中实现这一目标？

TableGroup.propTypes = {
  fieldNames: React.PropTypes.array.isRequired,
  dataFields: React.PropTypes.array.isRequired,
  uniqueField: React.PropTypes.string.isRequired,
  data: React.PropTypes.array,
  requestUrlSource: http://someurl/api/resource
}

Answer 1

要达到预期的结果，请使用以下选项

function dataOrRequest(props, propName, componentName) {
  return  (!props.hasOwnProperty('data') && 
             !props.hasOwnProperty('requestUrlSource')) 
            && new Error(`Either "data" or "requestUrlSource" is required`);
}


TableGroup.propTypes = {
  fieldNames: React.PropTypes.array.isRequired,
  dataFields: React.PropTypes.array.isRequired,
  uniqueField: React.PropTypes.string.isRequired,
  data: dataOrRequest,
  requestUrlSource: dataOrRequest
}

Answer 2

使用isRequiredIf。

@evcohen 在 4 年前有一个PRisRequiredIf添加到了 PropTypes 库中。不幸的是，即使在那时，他们也将 PropTypes 库置于维护模式，并且不会将其合并。

我工作的公司仍然使用 PropTypes，因此我们分叉了masterPropTypes 库的分支并添加了此功能。

所以现在你可以做这样的事情：

data:             PropTypes.array.isRequiredIf( props => !props.requestUrlSource ),
requestUrlSource: PropTypes.string.isRequiredIf( props => !props.data )

超级干净而且最小。

请随意在您自己的项目中使用我们的 forkpackage.json ，只需更新以下内容即可：

"prop-types": "github:cntral/prop-types#isRequiredIf"

注意：它不接受布尔参数，只接受传递 props 并需要返回布尔值的函数。