Search code examples
reactjsreduxreact-proptypes

react: why static propTypes

I am looking the redux todomvc codes. What is the static keyword in static propTypes?

Solution

  • static was not part of the last generation of Javascript ("ES5"), which is why you won't find it in older documentation. However it, and the rest of the "ES6" class syntax is now supported in all major browsers except Internet Explorer (http://caniuse.com/#search=es6), and if you use a transpiler like Babel you can use it in any browser. Most React users are already using Babel to transpile their JSX, so React sites (like Redux TodoMVC) take it for granted. You can read more about static here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static.

    In the case of static propTypes, propTypes need to be declared on the class itself, not on the instance of the class. In other words, if you use stateless components:

    function Foo() { 
    this.PropTypes = somePropTypes; // bad
    return <div></div>;
}
Foo.PropTypes = somePropTypes; // good

    When using ES6 classes, the equivalent of Foo.PropTypes = somePropTypes is:

    class Foo extends React.Component {
    static PropTypes = somePropTypes;
}

    As a side note, the ability to define properties in a class like that doesn't exist in any browser (yet): you need a transpiler such as Babel with the transform-class-properties plugin.