React中ES6类定义组件state的两种方式差异及报错解决问询

问题2：如何启用直接定义state的写法 #

你遇到报错，是因为开发环境还没配置支持类字段语法的转译规则，分三种常见场景解决：

场景1：使用Create React App（CRA） #

• 如果是CRA 2.0及以上版本：默认已经支持类字段语法，无需额外配置。如果是旧版本，建议直接升级react-scripts到最新版：

npm install react-scripts@latest
# 或者用yarn
yarn add react-scripts@latest

• 若升级后仍有问题，检查是否在项目中自定义了Babel配置，确保没有禁用类字段相关插件。

场景2：自定义Webpack+Babel环境 #

如果你是自己搭建的构建环境，需要安装并启用类字段的Babel插件：

1. 安装插件：

npm install --save-dev @babel/plugin-proposal-class-properties
# 或者用yarn
yarn add --dev @babel/plugin-proposal-class-properties

2. 在Babel配置文件（比如.babelrc、babel.config.json）中添加插件：

{
  "presets": ["@babel/preset-react", "@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

场景3：使用TypeScript #

如果项目用TypeScript，需要在tsconfig.json中确保以下配置：

{
  "compilerOptions": {
    "target": "ES2022", // ES2022正式支持类字段语法，或设置更高版本
    "module": "ESNext",
    "jsx": "react-jsx"
  }
}

如果是低于2.7版本的TypeScript，建议先升级TS版本，同时可以开启"experimentalDecorators": false避免语法冲突。

内容的提问来源于stack exchange，提问作者김기현