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 組件的官方文檔。