ReactJs、 `static defaultProps`を持つSyntaxError

Question

私はReactを使ってこのデモを書いています。 Webpackを使ってこのデモを作成します。このデモを開始すると、エラーが表示されます。

ERROR in ./src/app.js Module build failed: SyntaxError: Unexpected token (8:24)

import React, {Component} from 'react'; 
    import ReactDOM from 'react-dom'; 
class Button extends Component { 
    constructor(props){ 
     super(props); 

    } 
    static defaultProps = { 
     color:'blue', 
     text: 'Confirm', 
    } 
    render(){ 
     return (
      <button className={'btn btn-${color}'}> 
       <em>{text}</em> 
       <p>This is a button.</p> 
      </button> 
     ); 
    } 
} 
ReactDOM.render(<Button />, document.getElementById('app')); 

私は本から、このデモをお読みください。この本のために間違ったコードが印刷されている可能性があります。だから今私はこの質問をする。

エラー表示static defaultProps = {は正しくありません。この本はまたこの書式で書かれています。あなたは正しいコードを知っていますか？

Answer 1

webpackセットアップで何らかのエラーが発生する可能性があります。それ以外の場合は、defaultPropsが正しく定義されている必要があります。

class Button extends React.Component { 
 
    constructor(props){ 
 
     super(props); 
 

 
    } 
 
    static defaultProps = { 
 
     color:'blue', 
 
     text: 'Confirm' 
 
    } 
 
    render(){ 
 
     return (
 
      <button className={'btn btn-${this.props.color}'}> 
 
       <em>{this.props.text}</em> 
 
       <p>This is a button.</p> 
 
      </button> 
 
     ); 
 
    } 
 
} 
 
ReactDOM.render(<Button />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

Answer 2

端末は、現在のディレクトリにnpm install --save-dev babel-preset-stage-0を実行 - あなたは以下のコードをチェックthis.props.propName

を使用する必要が小道具にアクセスするための

もう一つ。

stage-0

{ "Presets": ["react", "es2015", "stage-0"], }}

カレントディレクトリ* .babelrc *ファイルに追加