statyczne propTypes nie działa pod ES6

Question

chcę dodać jakieś zasady rekwizytów:

import React, { Component } from 'react' 

export default class App extends Component { 
    static propTypes = { name: React.PropTypes.string.isRequired }; 

    render() { 
    return(
    ) 
    } 
} 

Ale mam ten błąd:

Warning: Failed prop type: Required prop `name` was not specified in `App`. 

mam tę konfigurację dla babel:

{ 
    "presets": ["es2015", "react"], 
    "plugins": ["transform-runtime", "transform-class-properties"] 
} 

Co zrobiłem źle?

Aktualizacja. Zmień kod: użyj: static

Answer 1

Wygląda na to, że nie transponujesz kodu w sposób umożliwiający rozpoznanie właściwości klasy statycznej. Jeśli używasz babel, można to włączyć, używając transformacji klasy: https://babeljs.io/docs/plugins/transform-class-properties/.

W naszej bazie kodu możemy uzyskać tę funkcjonalność z etapem 1 presetu, https://babeljs.io/docs/plugins/preset-stage-1/

Oczywiście zawsze można zdefiniować proptypes na klasy:

export default class App extends Component { 
    ... 
    render() { 
    ... 
    } 
} 

App.propTypes = { 
data: PropTypes.object.isRequired... 
} 

^^ ta nie wymaga specjalna transpozycja.

in klasie właściwość statyczna jest ładna, dzięki czemu można ustawić go tak jak to

export default class App extends Component { 
    static propTypes = { name: React.PropTypes.string.isRequired }; 
    render() {...} 
} 

zamiast definiować propTypes na this w konstruktorze.

Answer 2

Pozostawiam tę odpowiedź dla komentarzy, ale odpowiedź Timothy'ego na Babel jest lepsza.

---

W ES6, klasy mają metody, i to wszystko - nie właściwości nawet, nie mówiąc już statyczne:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static

ES2017 może obsługiwać inny mechanizm własności:

https://esdiscuss.org/topic/es7-property-initializers

To pytanie jest mocno powiązane z ES6 class variable alternatives an d jest ostatecznie prawdopodobnie dupe.

Answer 3

To jest właściwość statyczna klasy ES7.

Można go używać z babel-presets-stage-1. Oto doc http://babeljs.io/docs/plugins/preset-stage-1/ i http://babeljs.io/docs/plugins/transform-class-properties/

Jeśli chcesz korzystać ze wszystkich funkcji ES7, wystarczy zainstalować babel-preset-stage-0.

npm install babel-preset-stage-0 --save-dev 

Ponieważ stage-0 zależność jest stage-1, stage-1 zależność stage-2 i tak dalej.npm zainstaluje wszystkie zależności. Możesz więc korzystać ze wszystkich funkcji ES7.

Answer 4

ta nie działa dla mnie, bo zapomniałem ..

constructor(props) { 
    super(props) 
}