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

Question

我正在实现Class extend ，但出现此错误Missing class properties transform 。

该组件是

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']之前loaders: ['babel']

我还在 .babelrc 中添加了插件

["transform-class-properties"],

这是控制台中的错误

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

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

这是一个包含完整 React 组件的要点

Answer 1

试试=

import React from 'react';

export default class Manna extends React.Component {

  InitVal = {
    likes: 10
  }

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

  }

};

检查这个

更新

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

在第5行的要点中， InitVal用大写字母i编写，而在第39行用小写字母i编写： initVal 。 此外，render 方法返回一个对象文字，这是无效的，一个要返回的子元素，如解释here 。

这是定义为 es6 类的 react 组件的官方文档。