ReactJs,`static defaultProps`가있는 SyntaxError

Question

이 React를 사용하여이 데모를 작성합니다. Webpack을 사용하여이 데모를 작성합니다.이 데모를 시작하면 오류가 표시됩니다.

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')); 

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

나는 책에서이 데모를 참조하십시오. 이 책 때문에 아마도 잘못된 코드가 인쇄 될 것입니다. 그래서 나는 지금이 질문을한다.

오류 표시 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

확인 아래의 코드를 사용하는 데 필요한 소품에 액세스 할 수

한 가지 더.

* .babelrc *

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

파일을 현재 디렉토리에 stage-0 추가