反應propTypes組件外

Question

我以前進入功能性Javascript，最近我開始使用面向對象的Javascript和React庫。這個問題更多的是理解代碼。

爲什麼下面的代碼不工作

class MyComponent extends React.Component{ 

    propTypes : { 
     name: React.PropTypes.string.isReequired, 
     location: React.PropTypes.string 
    } 

    render(){ 
     return(
     <h1>Hello This is {this.props.name} and I live in 
     {this.props.location}</h1> 
    ); 
    } 
    } 

    ReactDOM.render(
    <MyComponent name="Node" location="DOM"/>, 
    document.getElementById('root') 
); 

鑑於此代碼的工作，

class MyComponent extends React.Component{ 
    render(){ 
     return(
     <h1>Hello This is {this.props.name} and I live in {this.props.location}</h1> 
    ); 
    } 
    } 

    MyComponent.propTypes = { 
    name: React.PropTypes.string.isReequired, 
    location: React.PropTypes.string 
    } 

    ReactDOM.render(
    <MyComponent name="Node" location="DOM"/>, 
    document.getElementById('root') 
); 

有人可以幫助我理解？謝謝。

Answer 1

您需要使用static字（定義靜態屬性），因爲對class自身中聲明，propTypes需要，不上class的實例，並使用=。

檢查DOC。

像這樣：

static propTypes = { 
    name: React.PropTypes.string.isRequired, 
    location: React.PropTypes.string 
} 

Answer 2

內的ES6類，靜態屬性是這樣的

class X extends Y { 
    static staticThing = { 
     ...  
    } 
} 

注意=

「分配」靜態屬性ES5方式看起來像第二種方式您有它存在

通常情況下，您將爲功能組件使用第二種方式，而您也可以對ES6樣式類組件使用第一種方式（儘管適用於=）。

此外，還要確保你有你的React.PropTypes正確 - isReequired應該isRequired