如何读取我的 Button 组件的 propTypes 的值

Question

我需要一个可以返回任何 React 组件的 propTypes 和 defaultProps 的函数，以便显示这样的表格：

我创建了以下函数来读取propTypes 和defaultProps

function getInfo(component) {
  console.log('propTypes', component.propTypes)
  console.log('defaultProps', component.defaultProps)
}

复制

https://www.webpackbin.com/bins/-KfXIWlTGcgSo-GeNAFR

预期 && 结果

记录 propTypes 和 defaultProps

在 webpack 2 中怎么样？

我正在尝试使用如下所示的组件重现相同的内容：

export class Button extends React.Component {
  static propTypes = {
    data: PropTypes.object.isRequired,
    onSubmitFormLogin: PropTypes.func.isRequired,
    changeForm: PropTypes.func.isRequired,
    requestError: PropTypes.func.isRequired,
  };

  static defaultProps = {
    data: {}
  };
...
}

为了使其工作，您需要使用static 关键字

根据babel，它应该是完全相同的东西但由于某种原因我无法阅读propTypes，但只能阅读defaultProps，那么他们去哪里了？

是 Webpack/Babel 删除了它们吗？

有没有人使用这种语法成功读取propTypes？

注意：我无法重现该问题，因为我没有找到任何允许 static 关键字的 webpackbin 等效项

Answer 1

使用您链接的存储库，完全可以访问propTypes。那么可能出了什么问题呢？

几乎有两种可能性。第一个是 component.propTypes 未定义。使用样板文件，在构建生产应用程序时就是这种情况 (npm run build)。它使用babel-plugin-transform-react-remove-prop-types（如package.json 所示），去除了道具类型。由于它不会在开发过程中发生，因此这不太可能是经历过的行为。

第二种可能是出错了。值得仔细阅读错误：

Uncaught ReferenceError: PropTypes is not defined

它说PropTypes 没有定义，所以这不可能是component.propTypes 或类属性声明。 PropTypes在哪里使用？

static propTypes = {
  data: PropTypes.object.isRequired,
  //      ^ here
  onSubmitFormLogin: PropTypes.func.isRequired,
  //                   ^ here
  changeForm: PropTypes.func.isRequired,
  //            ^ here
  requestError: PropTypes.func.isRequired,
  //              ^ and here
};

显然这意味着您没有导入PropTypes。要修复它，请导入它：

import React, { PropTypes } from 'react';

您也可以使用React.PropTypes，而无需更改导入。