Reagieren PropTypen außerhalb Komponente

Question

Ich war in funktionalen Javascript zuvor, Kürzlich ich begann mit objektorientierten Javascript und React Library. Bei dieser Frage geht es mehr darum, den Code zu verstehen.

Code unten Warum funktionieren nicht

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

Während dieser Code funktioniert,

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

Kann mir jemand helfen das zu verstehen? Vielen Dank.

Answer 1

Sie benötigen static Wort zu verwenden (die statische Eigenschaft definieren), weil propTypes Bedarf an der sich class erklärt werden, nicht auf die Instanz der class, und verwenden Sie =.

Überprüfen Sie die DOC.

So:

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

Answer 2

Innerhalb einer ES6 Klasse, statische Eigenschaften wie diese aussehen

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

Anmerkung der =

eine statische Eigenschaft der ES5 Art und Weise sieht aus wie der zweite Weg „Zuweisung“ Sie haben es dort

In der Regel verwenden Sie den zweiten Weg für funktionale Komponenten, während Sie den ersten Weg (wenn auch ordnungsgemäß mit einem =) für ES6-Stil-Klasse-Komponenten verwenden können.

auch, stellen Sie sicher, dass Sie Ihre React.PropTypes richtig - isReequired sollte isRequired sein