Statica React cu clase ES6 (Programare, Reactjs, Ecmascript 6)

niftygrifty a intrebat.

Funcționează obiectul statics cu clasele ES6 în React?

class SomeComponent extends React.Component {

  render() {
    // ...
  }

}

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

Ceva de genul celor de mai sus îmi dă o metodă nedefinită someMethod atunci când fac SomeComponent.someMethod()

4 răspunsuri
Felix Kling

statics funcționează numai cu React.createClass. Pur și simplu declarați metoda ca o metodă statică a clasei:

class SomeComponent extends React.Component {

  static someMethod() {
    //...
  }

  render() {
    // ...
  }

}

În ceea ce privește

React.statics = { ... }

Creați literalmente o metodă statics în cadrul proprietății React obiect. Această proprietate nu în mod magic extinde în mod magic componenta dumneavoastră.

Comentarii

  • Rețineți că proprietățile statice (de ex. static propTypes = {...}) sunt acceptate de babel și de instrumentele jsx; dar sunt doar o propunere ES7. Metodele statice sunt ES6. –  > Por Brigand.
  • făcând așa, obțin întotdeauna Cannot read property '_currentElement' of null eroare, în timp ce aceleași metode fără modificatorul static funcționează corect. Nu folosesc nicio variabilă de clasă în metodele mele… –  > Por Karl Adler.
Jonathan Huang

Deși statics funcționează doar pentru React.createClass, puteți scrie în continuare metode statice în notația ES6. Dacă folosiți ES7, atunci puteți scrie și proprietăți statice.

Puteți scrie statice în interiorul claselor ES6+ în acest mod:

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

    static someMethod(){
    }
}

Sau în afara clasei, astfel:

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

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

Dacă doriți să o scrieți ca în primul caz, atunci trebuie să setați stage: 0 pe Babel (deoarece este experimental).

Comentarii

  • Observați că propTypes = … nu este o notație ES6. –  > Por Bergi.
  • Aveți dreptate, aceasta pare a fi notația ES7 Property Initializer. facebook.github.io/react/blog/2015/01/27/… –  > Por Jonathan Huang.
  • Pentru a utiliza ES7 trebuie să npm install babel-preset-stage-0 și apoi să adăugați "stage-0" la .babelrc astfel: {"presets": ["es2015", "react", "stage-0"]} –  > Por e18r.
Amit kumar

Statica poate fi accesată fără a fi nevoie să instanți o componentă. În mod normal, nu sunt atât de utile, dar există câteva cazuri speciale. De exemplu, în rutare, atunci când părăsiți pagina curentă prin efectuarea unei ACȚIUNI PERFORM atunci, prin metodele Statics, puteți reține/ÎNTREBA utilizatorul dacă dorește cu adevărat să părăsească pagina.De exemplu:

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

Expune metodele de ciclu de viață willTransitionTo și willTransitionFrom.. ambele sunt speciale este utilă ca statică deoarece puteți anula de fapt o tranziție înainte de a instanția o componentă.

Roman Liutikov

statics funcționează numai pentru componentele React, verificați documentația.

Comentarii

  • OP nu are o componentă react? –  > Por Felix Kling.
  • Exact acesta este răspunsul tău. Ce este OP? –  > Por Roman Liutikov.
  • „OP” se referă fie la întrebare, fie la persoana care a scris întrebarea. Poate că doar ai formulat-o puțin ciudat, pentru că aceasta este cu siguranță o componentă React. Nu este creată cu React.createClass. –  > Por Felix Kling.