getDefaultProps與之反應組件類

Question

當我宣佈內部類getDefaultProps功能是從React.Component繼承這個給錯誤，如下面

我設置的條件在構造函數初始化props其undefined。

import React from "react" 
import ReactDOM from "react-dom" 

class App extends React.Component{ 
    propTypes:{ 
     techstack : React.PropTypes.string 
    } 

    constructor(){ 
     super(); 
     this.props.techstack === undefined ? "Rails" : '' 
     console.log(this.props); 
    } 

    render(){ 
     return (<div> 
       <h2>{this.props.techstack} Rocks</h2> 
       </div> 
       ) 
    } 
} 

ReactDOM.render(<App/>,document.getElementById("app")); 

感謝提前的幫助

Answer 1

React的0.13版本之後，props必須是不可變的。既然如此，getDefaultProps不再是有意義的功能和需要重構出的構造屬性，所以

import React from "react" 
import ReactDOM from "react-dom" 

class App extends React.Component{ 
    propTypes:{ 
     techstack : React.PropTypes.string 
    } 

    constructor(){ 
     super(); 
     this.props.techstack === undefined ? "Rails" : '' 
     console.log(this.props); 
    } 

    render(){ 
     return (<div> 
       <h2>{this.props.techstack} Rocks</h2> 
       </div> 
       ) 
    } 
} 
    App.defaultProps = {key: 'value'}; 

ReactDOM.render(<App/>,document.getElementById("app")); 

Answer 2

嘗試是這樣的：

import React from "react" 
import ReactDOM from "react-dom" 

class App extends React.Component{ 
    propTypes:{ 
     techstack : React.PropTypes.string 
    } 

    constructor(){ 
     super(); 
     this.props.techstack === undefined ? "Rails" : '' 
     console.log(this.props); 
    } 

    render(){ 
     return (<div> 
       <h2>{this.props.techstack} Rocks</h2> 
       </div> 
       ) 
    } 
} 

App.defaultProps = { prop: 'value' }; 

ReactDOM.render(<App/>,document.getElementById("app")); 

Answer 3

該提示是錯誤消息，您需要使用靜態關鍵字：

import React from "react" 
import ReactDOM from "react-dom" 

class App extends React.Component{ 

    static propTypes:{ 
     techstack : React.PropTypes.string 
    } 

    static defaultProps: { 
     techstack: 'Rails' 
    } 

    constructor(props){ 
     super(props); 
     console.log(props); 
    } 

    render(){ 
     return (<div> 
       <h2>{this.props.techstack} Rocks</h2> 
       </div> 
       ) 
    } 
} 

ReactDOM.render(<App/>,document.getElementById("app"));