Я использую объект данных в качестве своих реквизитов для компонента в ReactJS.
<Field data={data} />
Я знаю, что его легко проверить сам объект PropTypes:
propTypes: {
data: React.PropTypes.object
}
Но что, если я хочу проверить значения внутри? то есть. data.id, data.title?
props[propName]: React.PropTypes.number.required // etc...
Вы можете использовать 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
})
}
Если React.PropTypes.shape
не дает вам нужного уровня проверки типов, посмотрите tcomb-react.
Он предоставляет функцию toPropTypes()
, которая позволяет проверить схему, определенную с помощью tcomb. библиотеки, используя поддержку React для определения настраиваемых propTypes
валидаторов, выполняющих проверки с помощью 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
},
})
React.PropTypes
устарел. Пожалуйста, используйтеPropTypes
из пакетаprop-types
. Больше здесь