引导模态在阵营

Question

我想在按说明书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太多的经验，但是这对我来说貌似正确的语法。

Answer 1

如果你的代码粘贴到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> 
    ) 
    } 
}