ReactJs，具有`static defaultProps`的SyntaxError`

我使用React編寫這個演示。我使用Webpack來構建這個演示。當我開始演示時，錯誤會顯示給我。ReactJs，具有`static defaultProps`的SyntaxError`

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 = {是不正確的。這本書也是用這種形式寫的。你知道正確的代碼嗎？

來源

2016-12-27 jiexishede

在您的webpack設置中可能會出現一些錯誤。否則defaultProps被正確定義，因爲它應該是。

一兩件事來訪問，你需要使用this.props.propName

檢查下面的代碼的道具 -

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>

來源

2016-12-27 07:31:07 WitVault

的終端執行在當前目錄npm install --save-dev babel-preset-stage-0。

添加stage-0到當前目錄下的* .babelrc *文件

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

來源

2017-01-01 02:11:07 jiexishede

ReactJs，具有`static defaultProps`的SyntaxError`

回答

相關問題