Pourquoi console.log n'est pas appelée?

Question

J'apprends le cycle de vie des composants. Comme je le sais, getDeafaultProps() est appelée en premier lors de la création du composant. Je vérifie le journal, "Obtenir nos propriétés par défaut" n'est pas imprimé. Pourquoi?

/* 
* A simple React component 
*/ 
class Application extends React.Component { 

    getDefaultProps() { 
    console.log("Getting our default properties") 
    } 
    componentWillMount() { 
    console.log("Before Mounting") 
    this.setState({count: 1}); 
    } 


    render() { 
    return <div> 
     <h1>{this.state.count}</h1> 

     <p> 
     More info <a href="https://github.com/bradleyboy/codepen-react" target="_blank">here</a>. 
     </p> 
    </div>; 
    } 
} 

/* 
* Render the above component into the div#app 
*/ 
React.render(<Application />, document.getElementById('app')); 

Answer 1

Il ne devrait pas être appelé puisque vous utilisez des classes ES6. Voir la documentation:

Avec les fonctions et les classes de ES6 defaultProps est définie comme une propriété sur le composant lui-même

Avec createReactClass(), vous devez définir getDefaultProps() en fonction de l'objet passé

Answer 2

Vous devez utiliser defaultProps au lieu de getDefaultProps, parce que vous utilisez es6, et vous devez l'utiliser comme ceci:

static defaultProps = { 
    p: console.log("Getting our default properties") 
} 

ou définir en dehors de la class de cette façon:

App.defaultProps = { 
    p: console.log("Getting our default properties") 
} 

Vérifiez cet exemple:

class Application extends React.Component { 
 
    
 
    static defaultProps = { 
 
    p: console.log("Getting our default properties") 
 
    } 
 
    
 
    componentWillMount() { 
 
    console.log("Before Mounting") 
 
    this.setState({count: 1}); 
 
    } 
 

 

 
    render() { 
 
    return <div> 
 
     <h1>{this.state.count}</h1> 
 

 
     <p> 
 
     More info <a href="https://github.com/bradleyboy/codepen-react" target="_blank">here</a>. 
 
     </p> 
 
    </div>; 
 
    } 
 
} 
 

 
ReactDOM.render(<Application />, 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'/>

Answer 3

Rendez la méthode getDefaultProps statique. Ça devrait marcher.

static getDefaultProps() { 
    console.log("Getting our default properties") 
    }