React不用Babel时static语法报错及propTypes定义问题求助

看起来你遇到的核心问题是你的Babel配置没有启用类字段语法（Class Fields），这也是为什么课程里能直接用static propTypes = {}这种类内静态属性写法，而你这边会报错的原因。我来一步步拆解你的问题：

1. 为什么把static放在constructor里会报错？ #

static是用来定义类的静态成员的关键字，它只能直接写在类的顶层作用域里，不能放在类的方法（包括constructor）内部。你把它写在constructor里，相当于在函数内部用了static关键字，这在严格模式下是完全不合法的语法，所以会直接抛出Syntax error: static is a reserved word in strict mode的错误。

2. 移到constructor外提示propTypes未定义？ #

这是因为你的Babel不支持类字段提案语法（也就是在类内部直接赋值static propTypes = {}这种写法）。这种语法属于ES的提案特性，需要Babel的@babel/plugin-proposal-class-properties插件来转译，而如果你的create-react-app配置里没有启用这个插件（或者版本过旧），就会无法识别这种写法，导致报错。

3. 用this.propTypes能运行但有警告？ #

propTypes是React组件类的静态属性，它是属于类本身的，而不是组件实例的。当你把propTypes赋值给this（实例），React无法识别这是组件的类型校验配置，所以会提示你应该使用静态属性的方式来定义它。

解决方法 #

根据你的情况，有两种可行的方案：

方案一：修复Babel配置，启用类字段语法（推荐） #

如果你想和课程保持一致的写法，需要确保你的create-react-app支持类字段语法：

• 如果你用的是较新版本的create-react-app（v2及以上），默认是已经集成了@babel/plugin-proposal-class-properties的，可能是你的项目配置被修改过。可以尝试删除node_modules和package-lock.json（或yarn.lock），然后重新安装依赖：

  rm -rf node_modules package-lock.json
  npm install
  

• 如果是旧版本的create-react-app，你需要弹出配置（npm run eject），然后在Babel配置里添加@babel/plugin-proposal-class-properties插件，不过弹出配置后就无法再使用官方的升级支持了，谨慎操作。

方案二：使用ES5兼容的写法定义静态属性 #

如果暂时无法修复Babel配置，可以用传统的方式在类外部定义静态propTypes，这是所有React版本都支持的写法：

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class Xpto extends Component {
  constructor(props) {
    super(props); // 注意：这里要把props传给super，否则组件实例无法在constructor里访问props！
    // 你的构造函数逻辑（比如初始化state）
  }

  render() {
    // some logic
    return <div></div>;
  }
}

// 在类外部定义静态propTypes
Xpto.propTypes = {
  // 你的props类型定义
  name: PropTypes.string.isRequired,
  age: PropTypes.number
};

export default Xpto;

另外补充一点：你之前必须手动写constructor和super，也是因为Babel不支持类字段语法——如果支持的话，你可以直接在类内写state = {}来初始化状态，不需要写构造函数。而课程里省略constructor，是因为组件不需要额外的初始化逻辑，React会默认调用super(props)，所以可以简化写法。

内容的提问来源于stack exchange，提问作者rodcunha