ECMAScript 5 - 错误缺少 class 属性转换

Question

我正在实施 Class extend，但出现此错误 缺少 class 属性转换 .

组件是

import React from ('react')

const Manna = React.createClass({,

  initVal: {
       likes: 10,
   }

   render() {
     // code
      return {
        // code
      }

   }

});

module.exports = Manna

并更改为

import React from 'react';

export default class Manna extends React.Component {

  InitVal: {
    likes: 10
  }

  render() {
     // code
    return {
       // code
    }

  }

};

这是我在webpack.config.dev.js

中的配置

{
  test: /\.js$/,
  loaders: 'babel?presets[]=react,presets[]=es2015,presets[]=stage-0',
  include: path.join(__dirname, 'client')
},

我更改了加载器

之前 loaders: ['babel']

我还添加了 .babelrc 插件

["transform-class-properties"],

这是控制台的错误

 Missing class properties transform.
  15 |   // },
  16 | 
> 17 |   InitVal: {
     |   ^
  18 |     likes: 10,
  19 |     code: "2",
  20 |     size: 350,

我不明白为什么它现在抱怨缺少 class 属性转换，组件有什么问题？在这些更改之前一切正常

这里有一个 gist 和完整的 React 组件

Answer 1

试试 =

import React from 'react';

export default class Manna extends React.Component {

  InitVal = {
    likes: 10
  }

  render() {
     // code
    return {
       // code
    }

  }

};

勾选this

更新

由于我们使用 stage-0 并且 transform-class-properties 包含在 stage-2 中，因此我们不必手动将其包含在 plugins 下的 .babelrc 中.以下配置工作正常："presets": ["es2015", "stage-0", "react"].

在第 5 InitVal is written with an uppercase i while at line 39 is written with a lowercase i: initVal. Additionally render method returns an Object Literal, which is invalid, a single child element as to be returned as explained here 行的要点中。

Here 是定义为 es6 类.

的 React 组件的官方文档

ECMAScript 5 - 错误缺少 class 属性转换

ECMAScript 5 - Error Missing class properties transform

javascript

ecmascript-6

reactjs

babeljs

es6-class