引導模態在陣營

我想在按說明書from here反應以產生一個引導模式。引導模態在陣營

我創建了一個具有以下內容的新類;

class Button extends React.Component { 
    state = { 
    isShowingModal: false 
    } 
    openModal =() => { 
    this.setState({isShowingModal: true}); 
    } 
    render() { 
    return (
     <a onClick={this.openModal}> 
     Button Text 
     {this.state.isShowingModal ? 
      <ModalComponentHere/> 
     : null} 
     </a> 
    ) 
    } 
}

然而，當我嘗試建設項目中，我得到以下錯誤：

Parse Error: Line 6: Unexpected token = while parsing file

錯誤顯示出來就行了：

state = {

爲什麼會出現這個錯誤？

我沒有使用JavaScript太多的經驗，但是這對我來說貌似正確的語法。

來源

2015-10-14 octavian

如果你的代碼粘貼到Babel online REPL，你會發現，它不會transpile直到您檢查「實驗」複選框。

state = { 
    isShowingModal: false 
}

類體內這種語法不是（目前）有效的JavaScript語法，它是被包含在語言的未來版本語法的實驗方案。

巴貝爾支持transpiling experimental features to run in today's JavaScript。

這是一個es7.classProperties，這是一個0階段的建議，所以爲了使用它，你必須告訴Babel你要麼使用Stage 0特性，要麼特別是這個特性（它默認爲Stage 2）。

上面的鏈接涵蓋了一種方法來做到這一點，但另一種常見的方式是create a .babelrc file，它配置了您想要使用的實驗功能的階段，例如，

{ 
    "stage": 0 
}

退房陣營對如何創建通過擴展React.Component反應的組分的例子ES6 Classes文檔，但沒有實驗語法。

這應該是等同於你的代碼的目的是要做到：

class Button extends React.Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     isShowingModal: false 
    } 
    this.openModal =() => { 
     this.setState({isShowingModal: true}) 
    } 
    } 
    render() { 
    return (
     <a onClick={this.openModal}> 
     Button Text 
     {this.state.isShowingModal ? 
      <ModalComponentHere/> 
     : null} 
     </a> 
    ) 
    } 
}

來源

2015-10-14 13:38:51

謝謝！沒有更簡單的方法來更改代碼嗎？我不想使用其他文件。 – octavian

增加了一個新的部分來向你展示你可以做什麼 –

引導模態在陣營

回答

相關問題