提取/读取React propTypes

Question

我想要视觉化测试React组件。用户可以使用表单更改组件的props。例如，我想能够根据React.PropTypes.oneOf(['green', 'blue', 'yellow'])来呈现<select>。当我阅读MyComponent.propTypes时，它返回由React定义的函数。有没有一种方法可以提取/读取prop类型？

- GijsjanB

---

通过 getDefaultProps 函数编程地读取默认属性将非常有趣。 - Vadorequest

实际上是可能的：axe-prop-types — https://www.npmjs.com/package/axe-prop-types - sammysaglam

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);

- Alexandre Kirszenberg

---

我本来希望那个中间步骤不是必要的，但是看起来它很清晰、易于理解和可维护，所以为什么不呢...谢谢。 - GijsjanB

我希望有更好的方法。其实，我们团队曾经考虑过一个方法，我们会尝试它。如果这个方法更好，我会在这里给出反馈。 - Vadorequest

@Vadorequest，你能提出一个解决方案吗？ - dan-lee

@DanLee 不是的。当时应用Alexandre的解决方案太耗时间了，所以我就忘记了。但是在我看来，这是最接近的解决方案，我不喜欢的是需要更新所有使用新方法的组件。我希望React能在某个时候提供一些东西。 - Vadorequest

@Vadorequest 好的，我预料到没有简单的解决方案。非常感谢！但这是有道理的，因为PropTypes在生产中会被剥离掉。我们本来想用它来使我们的组件更加描述性，就像在react-storybook中一样。 - dan-lee

你可以使用npmjs.com/package/axe-prop-types。 - semanser

Answer 2

也许你可以添加一个代码示例来解释你想做什么，因为我不太理解你为什么要访问propTypes？PropTypes并不包含值，而是期望传递给组件的不同props应该是哪种类型的期望。

如果你有一个表单可以更改props，我假设你正在将prop传递到将呈现选择组件的组件中。你可以通过props对象访问这些props。

如果你想要验证propTypes可以采用不同类型的形式，可以使用以下内容：

optionalUnion: React.PropTypes.oneOfType([
  React.PropTypes.string,
  React.PropTypes.number,
  React.PropTypes.instanceOf(Message)
])

- Mike D

---

他想动态地显示React组件定义的propTypes，以便向最终用户显示组件的属性。我实际上也想出于文档目的做同样的事情。 - Vadorequest

没错！不过我最近没有再研究或深入了解它。 - GijsjanB

Answer 3

请看：https://www.npmjs.com/package/axe-prop-types，这将允许您提取所有的属性类型。

- sammysaglam