Reactjs私のコードスニペットのES6構文エラー

Question

ここに反応します。 code snippetでは、を避けるために、関数handleChangeをES6スタイルに変更すると、の後に=にエラーが発生します。なぜだろう。

===あなたが割り当てた後にセミコロンが欠落している私の変更==

function BoilingVerdict(props) { 
    if (props.celsius >= 100) { 
    return <p>The water would boil.</p>; 
    } 
    return <p>The water would not boil.</p>; 
} 

class Calculator extends React.Component { 
    constructor(props) { 
    super(props); 
    //this.handleChange = this.handleChange.bind(this); 
    this.state = {temperature: ''}; 
    } 

    handleChange = (e) => { 
    this.setState({temperature: e.target.value}); 
    } 

    render() { 
    const temperature = this.state.temperature; 
    return (
     <fieldset> 
     <legend>Enter temperature in Celsius:</legend> 
     <input 
      value={temperature} 
      onChange={this.handleChange} /> 
     <BoilingVerdict 
      celsius={parseFloat(temperature)} /> 
     </fieldset> 
    ); 
    } 
} 

ReactDOM.render(
    <Calculator />, 
    document.getElementById('root') 
); 

Answer 1

とコード：

handleChange = (e) => { 
    this.setState({temperature: e.target.value}); 
}; 

エラー（ "予期しないトークン"）はおそらくちょうどエディタですエラー。セミコロンを自動的に挿入する必要があるため、機能には影響しません。

Answer 2

あなたはes2015にバベルでコードを解析する必要があります。あなたのステートメントはクラスプロパティなので、transform-class-propertiesプラグイン（それはes2015プリセットの一部です）