javascriptreactjsecmascript-next

JS & ES6: Access static fields from within class


In ES6, given the following example:

export default class MyStyle extends Stylesheet {
   static Color = {
      mainDark: '#000'
   }
   static Comp = {
      ...
      color: Color.mainDark
   }
}

How can I access Color.mainDark (the static field)?


Solution

  • You can access it as you would expect, however if I recall there were some issues when using Babel and exporting the class immediately, so export after defining the class if you're having problems:

    class MyStyle extends Stylesheet {
       static Color = {
          mainDark: '#000'
       }
    
      someMethod() {
        console.log(MyStyle.Color.mainDark);
      }
    }
    
    export default MyStyle;
    

    You can read more about the Babel issue in an answer Marian made on a similar question, which is supposedly fixed in Babel 6.2.1.