ReactJS - 意外標記'。'錯誤

Question

我開始在VS2013上與ASP.NET MVC一起工作的反應項目。我已經配置了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組件實施構造函數。