Question

我从VS2013的反应项目开始，与ASP.NET MVC一起工作。我已经配置了webpack，配置似乎运行良好，直到我尝试实现以下类。

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

我收到错误的意外令牌＆＃39;。＆＃39;在＆＃39; this.state＆＃39;。我已经检查过es2015被设置为babel预设。如果我删除了state和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组件实现一个构造函数。

ReactJS - 意想不到的令牌＆＃39;。＆＃39;错误

2 个答案: