所以我刚刚从React框架下载了源代码,我在终端中收到了这个错误:
ERROR in ./src/components/TextEditor.js
Module build failed: SyntaxError: Unexpected token (24:8)
22 |
23 | // Set the initial state when the app is first constructed.
> 24 | state = {
| ^
25 | state: initialState
26 | }
27 |
我的问题是,为什么人们会像这样设置React Component的状态?如果某些人出现错误会带来什么好处?另外,我可以使用Babel预设或插件来防止此错误吗?
这就是我通常设置组件状态的方式,而且从我所见,这是常规的:
constructor() {
super();
this.state = {
state: initialState
};
}
记录中,这是整个文件:
// Import React!
import React from 'react'
import {Editor, Raw} from 'slate'
const initialState = Raw.deserialize({
nodes: [
{
kind: 'block',
type: 'paragraph',
nodes: [
{
kind: 'text',
text: 'A line of text in a paragraph.'
}
]
}
]
}, { terse: true })
// Define our app...
export default class TextEditor extends React.Component {
// Set the initial state when the app is first constructed.
state = {
state: initialState
}
// On change, update the app's React state with the new editor state.
render() {
return (
<Editor
state={this.state.state}
onChange={state => this.setState({ state })}
/>
)
}
}
答案 0 :(得分:17)
第一个例子是使用不属于ES6规范的类属性。您可以使用stage-2
预设或babel-plugin-transform-class-properties
插件模块与babel一起使用。
这种用法主要是一个偏好的问题,并且在使用babel进行转换时会产生与第二个示例相同的结果。