javascript - 用es6语法编写react jsx，使用gulp-babel编译失败？

Question

jsx文件源码：

(function (window) {
    "use strict";
    class TestES6 extends React.Component {
        static defaultProps = {
            title: "hello"
        };

        render() {
            return <h3>hello</h3>
        }
    }
    ReactDOM.render(<TestES6 />, document.getElementById("testContaienr"));
})(window);

gulp -v4.0.0-alpha.2:

1. gulp-babel -v6.1.1

2. babel-preset-react -v6.3.13

3. 编译代码

   gulp.task('main:jsx', function () {
   return gulp.src(baseDir + '/components/*.jsx')
   .pipe(react({presets: ["react"]}))
   .pipe(gulp.dest(baseDir + '/scripts'));});

错误提示：

去除static部分代码，可以通过编译，编译出来的js文件源码：

(function (window) {
    "use strict";

    class TestES6 extends React.Component {
        render() {
            return React.createElement(
                "h3",
                null,
                "hello"
            );
        }
    }
    ReactDOM.render(React.createElement(TestES6, null), document.getElementById("testContaienr"));
})(window);

问题【微信中打开】：

1. 在iphone（5s）上，可以显示"hello"；

2. 在android（华为荣耀6）上，不显示任何内容。

继续添加babel-preset-es2015 -v6.3.13

gulp编译代码修改为：（presets中添加es2015）

gulp.task('main:jsx', function () {
    return gulp.src(baseDir+'/components/*.jsx')
    .pipe(react({presets: ["react", "es2015"]}))
    .pipe(gulp.dest(baseDir + '/scripts'));
});

结果：
jsx文件中去除static部分代码：可以通过编译，iphone和android上均可以显示"hello";
jsx文件中添加static部分代码：无法通过编译

请问问题出在什么地方？是不支持static？谢谢各位

Answer 1

建议你用 webpack。trust me

Answer 2

es6没你这样的写法。。。
https://segmentfault.com/a/1190000003097911#articleHeader4

Answer 3

在react官网看到一段，应该是写错了，很感谢 @radius 和 @杨川宝

Answer 4

一直在犹豫这个问题要不要继续回答。毕竟已经标记解决了, 回答了也不会被采纳。 如果不回答的话，题主甚至包括回答的人都没有说明这个问题是怎么解决的……

不管怎样还是回答吧，这个问题的关键不在于 webpack，而是babel。你代码中用到了 static 关键字，如果你只开始babel的es2015语法是不支持这个属性的，需要你额外下载一个插件:

http://babeljs.io/docs/plugins/transform-class-properties/

如果题主想了解更多可以参考这里:

https://github.com/jeffmo/es-class-fields-and-static-properties#part-2-class-static-properties

Answer 5

gulp.task("react",function(){

return gulp.src("../js/jsx/*.jsx")
    .pipe(react())
    .pipe(babel({presets:[es2015]}))
    .pipe(gulp.dest("../js"))
    .pipe(notify({title:"React JSX to js and minify",message:"JSX task complete."}));

});