我想直观地测试React组件.用户可以使用表单更改组件的道具.我想要(例如)呈现< select>基于React.PropTypes.oneOf([‘green’,’blue’,’yellow’]).
您不能直接从propTypes读取,因为正如你所说,它们被定义为函数.
您可以以中间格式定义您的propTypes,从中生成您的propTypes静态.
var myPropTypes = {
color: {
type: 'oneOf',value: ['green','blue','yellow'],},};
function processPropTypes(propTypes) {
var output = {};
for (var key in propTypes) {
if (propTypes.hasOwnProperty(key)) {
// Note that this does not support nested propTypes validation
// (arrayOf,objectOf,oneOfType and shape)
// You'd have to create special cases for those
output[key] = React.PropTypes[propTypes[key].type](propTypes[key].value);
}
}
return output;
}
var MyComponent = React.createClass({
propTypes: processPropTypes(myPropTypes),static: {
myPropTypes: myPropTypes,});
然后,您可以通过MyComponent.myPropTypes或element.type.myPropTypes访问自定义的propTypes格式.
这是一个帮助,使这个过程更容易一些.
function applyPropTypes(myPropTypes,Component) {
Component.propTypes = processPropTypes(myPropTypes);
Component.myPropTypes = propTypes;
}
applyPropTypes(myPropTypes,MyComponent);
