javascript - 如何读取 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 删除了它们吗？

有人使用此语法成功读取 is propTypes 吗？

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

Answer 1

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

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

第二种可能是出现错误。值得仔细阅读该错误:

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 并且无需更改导入。