我在 ReactJS 中使用数据对象作为组件的道具。
<Field data={data} />
我知道验证 PropTypes 对象本身很容易：
propTypes: {
data: React.PropTypes.object
}
但是如果我想验证里面的值呢？ IE。 data.id, data.title?
props[propName]: React.PropTypes.number.required // etc...
【问题讨论】：
标签： reactjs
您可以使用React.PropTypes.shape 来验证属性：
propTypes: {
data: React.PropTypes.shape({
id: React.PropTypes.number.isRequired,
title: React.PropTypes.string
})
}
更新
正如@Chris 在 cmets 中指出的那样，从 React 版本 15.5.0 开始，React.PropTypes 已移至包 prop-types。
import PropTypes from 'prop-types';
propTypes: {
data: PropTypes.shape({
id: PropTypes.number.isRequired,
title: PropTypes.string
})
}
【讨论】：
React.PropTypes 现在已弃用。请改用prop-types 包中的PropTypes。 More here
如果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>
);
}
});
【讨论】：
想指出嵌套的工作深度超出了一层。这在验证 URL 参数时对我很有用：
propTypes = {
match: PropTypes.shape({
params: PropTypes.shape({
id: PropTypes.string.isRequired
})
})
};
【讨论】：
id 仅在存在 match.params 对象或 isRequired 级联时才需要，这意味着 match isRequired 与 params 对象与 id支柱？即，如果没有提供参数，它仍然有效吗？
match需要有params和params需要有id”。
match 存在并且如果match 包含params 那么它是必需的params 包含一个字符串id.
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
},
})
【讨论】：