Question

我有以下gulpfile.js：

var gulp = require('gulp'),
    babel = require('gulp-babel'),
    concat = require('gulp-concat'),
    react = require('gulp-react'),
    sass = require('gulp-sass'),

    jsxToJs = function() {
      //gulp.src('src/**/*.js')
      gulp.src('./src/sections/header/header.js')
        .pipe(react())
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(concat('javascript.js'))
        .pipe(gulp.dest('./'));
    };

gulp.task('jsxToJs', jsxToJs);
gulp.task('build', ['jsxToJs', 'styles']);

gulp.task('watch', function () {
    gulp.watch([
        './src/**/*.js', 
        './src/**/*.scss'
    ], [
        'jsxToJs', 
        'styles'
    ]);
});

gulp.task('default', ['build', 'watch']);

我正在尝试编译以下功能性React组件：

let Header = (props) => {
  return(
    <div />
  );
};

但是，当我运行gulp创建的javascript.js文件时，我收到以下错误：

Uncaught TypeError: e.render is not a function

如果我将组件转换回旧的方式（这是我在重新查看旧问题时发现的方式）：

var Header = React.createClass({
  render: function() {  
  }
});

然后它有效。

查看已编译的JS向我展示了这一点 - 在那里我可以看到render正在使用旧语法正确编译，但是对于新语法，当它被ESfivified时它没有被重新执行：

// not working
"use strict";

var Header = function Header(props) {
  return React.createElement("div", );
};

// working
"use strict";

var Header = React.createClass({ displayName: "Header",
  render: function render() {
    return React.createElement("div", );
  }
});

我已经检查过我已经正确安装了我的gulp并且我正在使用Node 6.10.2。我的gulp文件为scss提供了一些额外的东西，因为我已经删除了这个问题。

其他几点：

我没有使用像browserify这样的捆绑工具，因为我觉得这个项目太过分了 - 所以没有进口或出口。
我只是将执行JSONP的HTML页面加载到端点并在页面上加载包含JSON的脚本 - 这是在页面级别HOC中的getInitialState中完成的。

有谁能解释我做错了什么？

Answer 1

解决方案结果非常简单。

Babel需要提供presets才能进行转换。

我有es2015预设，但不是react预设。因此没有发生特定的脱落反应。这个补充修复了问题：

.pipe(react())
.pipe(babel({
    presets: ['es2015', 'react']
}))

我犯的错误，让我误入谷歌的错误的兔子洞，假设未能重新解决与吞咽反应功能有关 - 愚蠢的我。

Gact与React没有正确编译功能组件

1 个答案: