如何在ReactJS中验证嵌套对象的PropTypes？
如何在ReactJS中验证嵌套对象的PropTypes？
提问于 2014-11-14 12:44:00
我正在使用一个数据对象作为我在ReactJS中组件的道具。
<Field data={data} />我知道验证PropTypes对象本身很容易：
propTypes: {
data: React.PropTypes.object
}但是如果我想验证里面的值呢？即。data.id，data.title？
props[propName]: React.PropTypes.number.required // etc...回答 3
Stack Overflow用户
发布于 2014-11-14 18:49:32
如果React.PropTypes.shape没有提供您想要的类型检查级别，可以看看tcomb-react。
它提供了一个toPropTypes()函数，允许您通过利用React对定义custom propTypes validators的支持来验证使用tcomb库定义的模式，并使用tcomb-validation运行验证。
// define the component props
var MyProps = struct({
foo: Num,
bar: subtype(Str, function (s) { return s.length <= 3; }, 'Bar')
});
// a simple component
var MyComponent = React.createClass({
propTypes: toPropTypes(MyProps), // <--- !
render: function () {
return (
<div>
<div>Foo is: {this.props.foo}</div>
<div>Bar is: {this.props.bar}</div>
</div>
);
}
});Stack Overflow用户
发布于 2020-01-22 11:34:24
我想要指出的是，嵌套的工作深度超过了一层。在验证URL参数时，这对我很有用：
propTypes = {
match: PropTypes.shape({
params: PropTypes.shape({
id: PropTypes.string.isRequired
})
})
};Stack Overflow用户
发布于 2017-11-19 03:12:44
user: React.PropTypes.shap({
age: (props, propName) => {
if (!props[propName] > 0 && props[propName] > 100) {
return new Error(`${propName} must be betwen 1 and 99`)
}
return null
},
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26923042
复制相关文章
相似问题