reactjs - ES6 arrow function binding and gulp compiling error -
i've been trying hard accomplish code segment below, reading official es6 docs , other blogs:
onhomestorechange = () => (newstate) { this.setstate(newstate); }
i used link. seems gulp doesn't job correctly, a semicolon required after class property
error after putting 1 this
still undefined
. here part of gulp file uses transform.
appbundler // transform es6 , jsx es5 babelify .transform("babelify", {presets: ["es2015", "stage-0", "react"]}) //.transform(babelify.configure({stage: 0})) .bundle() .on('error',gutil.log) .pipe(source('bundle.js')) .pipe(gulp.dest(builddestination));
i use react 0.14.5
, these dev dependencies.
"babel-preset-es2015": "^6.3.13", "babel-preset-react": "^6.3.13", "babel-preset-stage-0": "^6.3.13", "babelify": "7.2.0", "browserify": "^12.0.1", "gulp": "^3.9.0", "gulp-if": "^2.0.0", "gulp-streamify": "^1.0.2", "gulp-uglify": "^1.5.1", "gulp-util": "^3.0.7", "vinyl-source-stream": "^1.1.0"
i'm confused , appreciated.
edit - adding react complete code
export default class app extends react.component { constructor(props) { //put componentwillmount code in constructor super(props); //this.bindmethods(); this.state = homestore.getstate(); } componentdidmount() { homestore.listen(this.onhomestorechange); } componentwillunmount() { homestore.unlisten(this.onhomestorechange); } onhomestorechange = (newstate) => { //i had syntax error here this.setstate(newstate); } render() { return ( <div> components go here </div> ); } bindmethods() { this.onhomestorechange = this.onhomestorechange.bind(this); } }
if use bindmethods() it's working not =>
you have set of brackets. arrow function should take argument in first set of brackets:
onhomestorechange = (newstate) => { this.setstate(newstate); };
the error you're seeing because have defined onhomestorechange
() => (newstate)
, , followed , {...}
block.
Comments
Post a Comment