如何在ReactJS中验证嵌套对象的PropTypes ?

我使用一个数据对象作为我在ReactJS中的组件的道具。

<Field data={data} />

我知道验证PropTypes对象本身很容易:

propTypes: {
data: React.PropTypes.object
}

但是如果我想验证里面的值呢?ie。数据。id, data.title吗?

props[propName]: React.PropTypes.number.required // etc...
95685 次浏览
小开
最佳答案

你可以使用React.PropTypes.shape来验证属性:

propTypes: {
data: React.PropTypes.shape({
id: React.PropTypes.number.isRequired,
title: React.PropTypes.string
})
}

更新

正如@Chris在评论中指出的那样，从React 15.5.0版本开始，React.PropTypes已经转移到prop-types包中。

import PropTypes from 'prop-types';


propTypes: {
data: PropTypes.shape({
id: PropTypes.number.isRequired,
title: PropTypes.string
})
}

< a href = " https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html migrating-from-react。proptypes" rel="noreferrer">更多信息

小开

如果React.PropTypes.shape没有提供你想要的类型检查级别，请查看tcomb-react。

它提供了一个toPropTypes()函数，让你通过使用React对定义自定义propTypes验证器的支持来验证用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>
);
}
});
小开 
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
},
})
小开

想要注意的是，嵌套工作的深度超过了一层。在验证URL参数时，这对我很有用:

propTypes = {
match: PropTypes.shape({
params: PropTypes.shape({
id: PropTypes.string.isRequired
})
})
};

提交答案