web-dev-qa-db-fra.com

React statique avec les classes ES6

Est-ce que l'objet statique fonctionne avec les classes ES6 dans React?

class SomeComponent extends React.Component {

  render() {
    // ...
  }

}

React.statics = {
  someMethod: function() {
    //...
  }
};

Quelque chose comme ce qui précède me donne une méthode non définie someMethod quand je fais SomeComponent.someMethod()

reactjsecmascript-6
46
niftygrifty

statics ne fonctionne qu'avec React.createClass. Déclarez simplement la méthode en tant que méthode de classe statique:

class SomeComponent extends React.Component {

  static someMethod() {
    //...
  }

  render() {
    // ...
  }

}

En ce qui concerne

React.statics = { ... }

Vous créez littéralement une propriété statics sur l'objet React. Cette propriété ne magiquement ne prolonge pas votre composant.

61
Felix Kling

Bien que statics ne fonctionne que pour React.createClass, vous pouvez toujours écrire des méthodes statiques en notation ES6. Si vous utilisez ES7, vous pouvez également écrire des propriétés statiques.

Vous pouvez écrire des statistiques à l'intérieur de classes ES6 + de cette façon:

class Component extends React.Component {
    static propTypes = {
    ...
    }

    static someMethod(){
    }
}

Ou en dehors de la classe comme ceci:

class Component extends React.Component {
   ....
}

Component.propTypes = {...}
Component.someMethod = function(){....}

Si vous voulez l'écrire comme l'ancien, vous devez définir stage: 0 sur Babel (depuis son expérience).

24
Jonathan Huang

Les statiques peuvent être consultées sans avoir à instancier un composant. Normalement, elles ne sont pas très utiles, mais il existe quelques cas particuliers. Par exemple, dans le routage lorsque vous quittez la page en cours avec ACTION PERFORM, vous pouvez demander à l'utilisateur, par le biais de méthodes statiques, de demander/s'il souhaite réellement quitter la page. Par exemple:

exampleComponent= React.createClass({
statics:{
        willTransitionFrom: function(transition,component){
            // check any state here or value Aasked the user.
        }
    }
});

Il expose les méthodes willTransitionTo et willTransitionFrom du cycle de vie. les deux sont particuliers est utile en tant que statique car vous pouvez réellement annuler une transition avant d'instancier un composant.

1
Amit kumar