Hi everybody,
I’ve a problem using ES7 syntax (in react component)
inside my reactclass I’ve startNewGame() class and then in render class I want to refer to it as this
onClick={::this.startNewGame} but meteor says there’s a error - right before the curly brace. first I run this app (pexeso) with react-heatpack it was all fine, so I said I’ll try to implement it in a simple meteor app - so it can be played over network for 2 players. I’ve installed babel-runtime babel-complier and jsx packages but still the same result
Right now the ecmascript and jsx packages use a hand-picked set of stable transformations. Perhaps that one didn’t make it in, maybe @benjamn can comment why?
may not be the most futureproof syntax…
Although personally I’m a huge fan of it
@mattkrick is right, function bind syntax is still at the earliest stage of specification (stage 0, the strawman stage), and so the details are still very likely to change. This is not a hypothetical risk; for example, changes to the specification of super and @decorators have necessitated extensive rewrites in codebases where they were used, and both super (ES2015) and decorators (stage 1) are further along in the process than function bind (stage 0). The team of Facebook engineers who changed super() to super.method() everywhere in the Facebook codebase had special t-shirts made to commemorate the effort.
In this case, I would recommend onClick={this.startNewGame.bind(this)}.
You could also do onClick={() => this.startNewGame()}, right? Although I do prefer the bind syntax when possible.
Yup! Take your pick, similar chat going on over at react: https://discuss.reactjs.org/t/es6-classes-how-to-avoid-the-bind-in-constructor-for-event-handlers/2694/15
My rule of thumb is if it’s in babel & the champion still wants to move it forward, then I’ll use it. Still not a guarantee, though. Object.observe made it into native Chrome & it got to stage 2 IIRC before they pulled it.