reactjs - 静态 propTypes 在 ES6 下不起作用

Question

我想为 Prop 添加一些规则:

import React, { Component } from 'react'

export default class App extends Component {
  static propTypes = { name: React.PropTypes.string.isRequired };

  render() {
    return(
    )
  }
}

但是我得到了一个错误:

Warning: Failed prop type: Required prop `name` was not specified in `App`.

我对 babel 有这样的配置:

{
  "presets": ["es2015", "react"],
  "plugins": ["transform-runtime", "transform-class-properties"]
}

我做错了什么？

更新。更改代码:使用static

Answer 1

看来您没有以可以识别静态类属性的方式转译代码。如果您使用 babel，可以通过使用类属性转换来启用此功能:https://babeljs.io/docs/plugins/transform-class-properties/ 。

在我们的代码库中，我们通过阶段 1 预设 https://babeljs.io/docs/plugins/preset-stage-1/ 获得此功能。

当然，您始终可以在类上定义您的 proptypes:

export default class App extends Component {
  ...
  render() {
    ...
  } 
}

App.propTypes = {
 data: PropTypes.object.isRequired...
}

^^ 这不需要任何特殊的转译。

类中的静态属性很好，所以你可以像这样设置它

export default class App extends Component {
  static propTypes = { name: React.PropTypes.string.isRequired };
  render() {...} 
}

而不是在构造函数中的 this 上定义 propTypes。