reactjs - 提取/读取 React propTypes

Question

我想直观地测试 React 组件。用户可以使用表单更改组件的属性。我希望能够(例如)渲染 <select>基于React.PropTypes.oneOf(['green', 'blue', 'yellow']) .

当我读到MyComponent.propTypes时它返回一个由 React 定义的函数。有没有办法提取/读取 Prop 类型？

Answer 1

您无法直接从 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);