17

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

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

4

3 回答 3

6

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或访问您的自定义 propTypes 格式element.type.myPropTypes。

这是使此过程更容易一些的助手。

function applyPropTypes(myPropTypes, Component) {
  Component.propTypes = processPropTypes(myPropTypes);
  Component.myPropTypes = propTypes;
}

applyPropTypes(myPropTypes, MyComponent);
于 2016-03-07T09:27:31.227 回答
1

看看：https ://www.npmjs.com/package/axe-prop-types这将允许您提取所有道具类型

于 2019-05-06T14:28:06.423 回答
1

也许添加一个您正在尝试做的代码示例，因为我不太明白，但您为什么要访问 propTypes？PropTypes 不包含值，而是对传递给组件的不同 props 的值类型的期望。

如果您有一个允许您更改道具的表单，我假设您将道具传递到将呈现选择组件的组件中。您可以通过道具对象访问这些道具。

如果您尝试验证可以具有不同类型形式的 propTypes，则可以使用以下内容：

optionalUnion: React.PropTypes.oneOfType([
  React.PropTypes.string,
  React.PropTypes.number,
  React.PropTypes.instanceOf(Message)
])
于 2015-12-15T14:35:09.203 回答