Question

此ReactJS代码有效并产生所需的输出：

import React from 'react'

class MyComponent extends React.Component {
  state = {'x': 1}

  render() {
    console.log('render: this.state:', this.state)
    return <div>{this.state.x}</div>
  }
}

export default MyComponent

但是与Node.js一起运行时，这段非常相似的ES6代码会导致错误：

class MyComponent {
  state = {'x': 1}

  render() {
    console.log('render: this.state:', this.state)
    return <div>{this.state.x}</div>
  }
}

let c = new MyComponent()
c.render()

这是错误：

$ node foo.js 
/Users/lone/foo.js:2
  state = {'x': 1}
        ^

SyntaxError: Unexpected token =

当第一个示例在ReactJS上运行正常时，为什么第二个示例会导致错误？

Answer 1

该语法尚未成为javascript的标准部分（目前为stage 3 proposal）。可以在babel's class-properties plugin的帮助下使用它，将其转换为标准javascript。您的react项目最有可能包含此插件，这就是它在react中为您工作的原因。例如，create-react-app包含插件。没有插件，react也不能使用该语法。

Answer 2

正如已经提到的，这还不是标准的，create-react-app有一个transbalation babel插件。但是您可以通过在Node> = 10.9上使用标志来使其工作。标记为--js-flags="--harmony"。

Source

类作用域中的变量分配可在React中使用，但不能在ES6中使用

2 个答案: