[英]ECMAScript 5 - Error Missing class properties transform
I am implementing the Class extend
and i get this error Missing class properties transform .我正在实现Class extend
,但出现此错误Missing class properties transform 。
The Component was该组件是
import React from ('react')
const Manna = React.createClass({,
initVal: {
likes: 10,
}
render() {
// code
return {
// code
}
}
});
module.exports = Manna
and changed to并改为
import React from 'react';
export default class Manna extends React.Component {
InitVal: {
likes: 10
}
render() {
// code
return {
// code
}
}
};
This is my configuration in webpack.config.dev.js这是我在 webpack.config.dev.js 中的配置
{
test: /\.js$/,
loaders: 'babel?presets[]=react,presets[]=es2015,presets[]=stage-0',
include: path.join(__dirname, 'client')
},
I have changed the loader following this answer我已经按照这个答案更改了加载程序
Before it was loaders: ['babel']
在它是loaders: ['babel']
之前loaders: ['babel']
I have also added to .babelrc the plugin我还在 .babelrc 中添加了插件
["transform-class-properties"],
This is the error in the console这是控制台中的错误
Missing class properties transform.
15 | // },
16 |
> 17 | InitVal: {
| ^
18 | likes: 10,
19 | code: "2",
20 | size: 350,
I do not understand why it is complaining now for Missing class properties transform, what is wrong in the component?, everything was working fine before of these changes我不明白为什么现在抱怨缺少类属性转换,组件有什么问题?,在这些更改之前一切正常
Here a gist with the full React component这是一个包含完整 React 组件的要点
Try with =试试=
import React from 'react';
export default class Manna extends React.Component {
InitVal = {
likes: 10
}
render() {
// code
return {
// code
}
}
};
UPDATE更新
Since we are using stage-0
and transform-class-properties
is included in stage-2
, we don't have to include it manually in .babelrc
under plugins
.由于我们使用的是stage-0
并且transform-class-properties
包含在stage-2
,因此我们不必手动将其包含在.babelrc
下的plugins
。 The following configuration works fine: "presets": ["es2015", "stage-0", "react"]
.以下配置工作正常: "presets": ["es2015", "stage-0", "react"]
。
In the gist at line 5 InitVal
is written with an uppercase i
while at line 39 is written with a lowercase i
: initVal
.在第5行的要点中, InitVal
用大写字母i
编写,而在第39行用小写字母i
编写: initVal
。 Additionally render method returns an Object Literal, which is invalid, a single child element as to be returned as explained here .此外,render 方法返回一个对象文字,这是无效的,一个要返回的子元素,如解释here 。
Here is the official documentation for react components defined as es6 classes. 这是定义为 es6 类的 react 组件的官方文档。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.