ReactJS-意外令牌'。' 错误

Question

我从与ASP.NET MVC一起在VS2013上进行我的React项目开始。 我已经配置了webpack，在尝试实现以下类之前，配置似乎运行良好。

class Hello extends React.Component {
    this.state = { visible: true }
    render() { 
       /** Method definition **/
    ...
}

我在“。”处收到错误的意外令牌。 在“ this.state”。 我已经检查过将es2015设置为babel预设。 如果我删除状态和toggleVisibility分配，则webpack捆绑确定。

知道我还能尝试什么吗？

Answer 1

这是一个类，因此正确的语法应该是

class Hello extends React.Component {
    state = { visible: true }
    render() { 
       /** Method definition **/
    ...
}

此外，建议的定义初始状态的方法应为

class Hello extends React.Component {
    constructor(props) {
      super(props)
      this.state = { visible: true }
    }

    render() { 
       /** Method definition **/
    ...
}

Answer 2

您应该在类似的构造函数中定义this.state

constructor(props) {
  super(props);
  this.state = { 
     visible: true 
  };
}

因此，您的代码应为

class Hello extends React.Component {
  constructor(props) {
    super(props);

    this.state = { 
      visible: true 
    };
  }

  render() {}
}

从React docs ：

构造函数是初始化状态的正确位置。 如果您不初始化状态并且不绑定方法，则无需为React组件实现构造函数。