代码之家 › 专栏 › 技术社区 › andrey.shedko

ES6定义反应状态的方法

babeljs ecmascript-6 reactjs javascript

andrey.shedko · 技术社区 · 6 年前

我想这样用state:

class Checkout extends Component {
    state = {
        ingredients: null,
        totalPrice: 0
    };

但是我说的不对 Unexpected token = ,我知道可以用 BabelPuxin转换类属性 ,不幸的是,在我的情况下不起作用。
这是我的 小精灵

"babel": {
    "presets": [
      "env",
      "react-app"
    ],
    "plugins": ["transform-class-properties"]
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "devDependencies": {
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "eslint": "^4.19.1",
    "eslint-plugin-react": "^7.1.0"
  }

你知道这里还有什么问题吗?

3 回复 | 直到 6 年前

andrey.shedko 6 年前

问题与 Eslint . 当我安装 babel-eslint 并添加PARCER选项 .eslintrc ,此错误已消失。

"parser": "babel-eslint",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],

Code-Apprentice 6 年前

做你想做的事的典型方法是 this.state 在构造函数中:

class Checkout extends Component {
    constructor() {
        this.state = {
            // Whatever keys and values you want here
        }
    }
}

Revinand 6 年前

试用 babel-preset-stage-2 . 它包括 transform-class-properties 还有其他的东西。并把它添加到你的宝贝 presets 数组

"babel": {
  "presets": [
    "env",
    "react-app",
    "stage-2"
  ]
}

这将允许您定义 state ES6方式。

巴贝尔预置的推荐方法也是通过 .babelrc 文件。它应该放在项目根目录中。

推荐文章

theJuls · .babelrc破坏语义ui和下一个应用程序

6 年前

sdgfsdh · 巴别塔插件可以扩展解析器来添加新的关键字吗?

6 年前

codematix · webpack 4.7是否仍需要babel loader。十、

6 年前

Homan · 模块分析失败:使用webpack dev服务器的意外令牌

6 年前

FabianCook · react中箭头函数的优化

6 年前

OneOfOne · 如何将babel输出类作为命名函数?

6 年前

Valerio Emanuele · 使用Webpack 4.5+Babel 6+React 16导入JSON时出错

6 年前

CoderKK · Web包生成错误

6 年前

Zhengquan Bai · Web包4中的babel loader无法使用树抖动

6 年前

Lordrem · 如何在Web包中使用外部库

6 年前