編譯問題與反應jsx組件

Question

用下面的代碼我得到第9行錯誤
語法錯誤：意外的標記（9:10）有人可以告訴我這個代碼的問題以及如何解決它。

import React from 'react'; 
import {SelectField, MenuItem, getMuiTheme, MuiThemeProvider,Stepper,Step,StepLabel,StepButton,StepContent} from 'material-ui' 
    import injectTapEventPlugin from 'react-tap-event-plugin'; 
    import RaisedButton from 'material-ui/RaisedButton'; 
    import FlatButton from 'material-ui/FlatButton'; 

    class StepperComponent extends React.Component{ 

     state = { 
      stepIndex: 0, 
     } 

     handleNext =() => { 
      const {stepIndex} = this.state; 
      if (stepIndex < 2) { 
       this.setState({stepIndex: stepIndex + 1}); 
      } 
     }; 

     handlePrev =() => { 
      const {stepIndex} = this.state; 
      if (stepIndex > 0) { 
       this.setState({stepIndex: stepIndex - 1}); 
      } 
     }; 

     renderStepActions(step) { 
      return (
       <div style={{margin: '12px 0'}}> 
        <RaisedButton 
         label="Next" 
         disableTouchRipple={true} 
         disableFocusRipple={true} 
         primary={true} 
         onTouchTap={this.handleNext} 
         style={{marginRight: 12}} 
        /> 
        {step > 0 && (
         <FlatButton 
          label="Back" 
          disableTouchRipple={true} 
          disableFocusRipple={true} 
          onTouchTap={this.handlePrev} 
         /> 
        )} 
       </div> 
      ); 
     } 

     render() { 
      const {stepIndex} = this.state; 

      return (
       <div style={{maxWidth: 380, maxHeight: 400, margin: 'auto'}}> 
        <MuiThemeProvider muiTheme={getMuiTheme}> 
        <Stepper 
         activeStep={stepIndex} 
         linear={false} 
         orientation="vertical" 
        > 
         <Step> 
          <StepButton onClick={() => this.setState({stepIndex: 0})}> 
           GROUP NAME 
          </StepButton> 
          <StepContent> 
           <p> 
            Add group name and description selection component here 
           </p> 
           {this.renderStepActions(0)} 
          </StepContent> 
         </Step> 
         <Step> 
          <StepButton onClick={() => this.setState({stepIndex: 1})}> 
           STUDENT 
          </StepButton> 
          <StepContent> 
           <p> Add student component here </p> 
           {this.renderStepActions(1)} 
          </StepContent> 
         </Step> 
         <Step> 
          <StepButton onClick={() => this.setState({stepIndex: 2})}> 
           VERIFY 
          </StepButton> 
          <StepContent> 
           <p> 
            Add verify group component here 
           </p> 
           {this.renderStepActions(2)} 
          </StepContent> 
         </Step> 
        </Stepper> 
       </MuiThemeProvider> 
       </div> 
      ); 
     } 
    } 

    export default StepperComponent; 

如果我用下面的替代語法那麼就沒有給我任何的編譯錯誤，但不知何故按鈕單擊事件不工作。

constructor(props) { 
     super(props); 
     this.state = { 
      stepIndex: 0, 
     }; 
    } 


    handleNext() { 
     const {stepIndex} = this.state; 
     if (stepIndex < 2) { 
      this.setState({stepIndex: stepIndex + 1}); 
     } 
    }; 

    handlePrev() { 
     const {stepIndex} = this.state; 
     if (stepIndex > 0) { 
      this.setState({stepIndex: stepIndex - 1}); 
     } 
    }; 

Answer 1

你不能有

state = { 
      stepIndex: 0, 
     } 

類裏面，你必須把狀態對象的第一個錯誤的事實，造成構造

constructor(props){ 
    super(props); 
    this.state = { 
      stepIndex: 0, 
     } 
} 

Answer 2

內如果您想要直接設置初始狀態，則必須在構造函數中執行此操作

修改狀態在所有其他情況下應該用this.setState完成。

爲了解決爲什麼使用代碼的第二語法打破了handleNext/handlePrev：

使用ES6類語法陣營指內嵌事件不會自動綁定到組件。按鈕：如預期，因爲this指的背景下，其中處理程序我們稱之爲

到this.setState或this.state任何調用將無法正常工作。

設置初始狀態，並在構造函數中使用綁定：

constructor(props){ 
    super(props); 
    this.state = { 
    stepState: 0 
    } 
    this.handleNext = this.handleNext.bind(this); 
    this.handlePrev = this.handlePrev.bind(this); 
} 

Answer 3

您需要巴貝爾預設Stage-2或更低聲明爲類屬性的函數和變量。 類屬性初始值設定項語法是es2016 specifications的一部分，並且被transform-class-properties插件接受。

嗯，這是一個高度實驗性的功能，但可以通過配置使用它您.babelrc：

要麼添加預設階段2（npm install --save-dev babel-preset-stage-2）

"presets": ["react", "es2015", "stage-2"] 

或特定插件（npm install --save-dev babel-plugin-transform-class-properties）

"plugins": ["transform-class-properties"] 

在此之後，您的原始代碼（如bel可以工作。

class StepperComponent extends React.Component{ 

    state = { 
     stepIndex: 0, 
    } 

    handleNext =() => { 
     const {stepIndex} = this.state; 
     if (stepIndex < 2) { 
      this.setState({stepIndex: stepIndex + 1}); 
     } 
    }; 

    // ...