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

Question

我需要一个函数来 return 任何 React 组件的 propTypes 和 defaultProps 以便显示 table 像这样：

我创建了以下函数来读取 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 (as seen in its package.json)，去除了 prop 类型。由于它不会在开发中发生，因此这不太可能是有经验的行为。

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

Uncaught ReferenceError: PropTypes is not defined

它说 PropTypes 未定义，所以这不可能是 component.propTypes 或 class 属性声明。 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 并且不需要更改导入。

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

How to read the value of propTypes of my Button component

javascript

jsx

reactjs

webpack

babeljs

复制

预期 && 结果

在 webpack 2 中怎么样？