(function (window) {
"use strict";
class TestES6 extends React.Component {
static defaultProps = {
title: "hello"
};
render() {
return hello
}
}
ReactDOM.render( , document.getElementById("testContaienr"));
})(window);
gulp-babel -v6.1.1
babel-preset-react -v6.3.13
编译代码
gulp.task('main:jsx', function () {
return gulp.src(baseDir + '/components/*.jsx')
.pipe(react({presets: ["react"]}))
.pipe(gulp.dest(baseDir + '/scripts'));});

(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);
问题【微信中打开】:
在iphone(5s)上,可以显示"hello";
在android(华为荣耀6)上,不显示任何内容。
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部分代码:无法通过编译
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
建议你用 webpack。trust me
gulp.task("react",function(){
});