如何在React组件PropTypes中定义所需的替代属性？
如何在React组件PropTypes中定义所需的替代属性？
提问于 2017-05-06 06:12:40
这就是用例:组件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
}回答 4
Stack Overflow用户
回答已采纳
发布于 2020-08-13 16:34:19
使用isRequiredIf。
有一个4年前的按下 @evcohen将isRequiredIf添加到PropTypes库。不幸的是，即使在那个时候，他们也在将PropTypes库置于维护模式中，并且不会将它合并到其中。
我为之工作的公司仍然使用PropTypes，因此我们分叉了PropTypes库的master分支，并在其中添加了这个功能。
所以现在你可以这样做了：
data: PropTypes.array.isRequiredIf( props => !props.requestUrlSource ),
requestUrlSource: PropTypes.string.isRequiredIf( props => !props.data )超级干净和最小。
可以在您自己的项目中使用我们的叉子，方法是使用以下内容更新您的package.json：
"prop-types": "github:cntral/prop-types#isRequiredIf"注意:它不接受布尔param，只接受传递道具并需要返回布尔值的函数。
Stack Overflow用户
发布于 2017-05-06 07:08:57
要达到预期效果，请使用下面的选项
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
}Stack Overflow用户
发布于 2017-05-06 07:30:26
根据React的文档，我认为customProp应该为您完美地工作。
dataOrRequest: function(props, propName, componentName) {
function checkDataOrRequest() {
return (!props.hasOwnProperty('data')
&& !props.hasOwnProperty('requestUrlSource'))
&& new Error(`Either "data" or "requestUrlSource" is required`);
}
function checkTypes() {
if ((propName === 'data' && props.constructor !== Array) ||
(propName === 'requestUrlSource' && props.constructor !== String)) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
return false;
}
return checkDataOrRequest() && checkTypes();
}在声明自定义验证fn之后，现在可以将其用于
TableGroup.propTypes = {
data: dataOrRequest,
requestUrlSource: dataOrRequest
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43817365
复制相关文章
相似问题
腾讯云开发者
