静态propTypes在ES6下不起作用

Question

我想为道具添加一些规则:

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"]
}

我做错了什么？

UPD.更改代码:使用static

Answer 1

您似乎没有以能够识别静态类属性的方式来转换代码.如果您使用的是babel,可以使用Class Property Transform启用它:https://babeljs.io/docs/plugins/transform-class-properties/.

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

当然,你总是可以在课堂上定义你的proptypes:

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

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

^^这不需要任何特殊的翻译.

类in static属性很好,所以你可以像这样设置它

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

而不是this在构造函数中定义propTypes .