javascript - Gulp CJSX 渲染编译错误

Question

我正在使用 gulp 编译 cjsx 文件(用于 Reacjs)，但编译完成后遇到一些问题。

gulpfile.js

gulp.task('scripts', function ()   {
return gulp.src('dev/scripts/**/*.cjsx')
    .pipe($.cjsx({bare: true}))
    .pipe(gulp.dest('.tmp/scripts/'))
    .pipe($.size()); 
});

组件.cjsx

@Login = React.createClass
getInitialState: ->
    error: null

handleSubmit: (e) ->
    #do some thing

render: ->
    if @state.error
        error = <div>{this.state.error}</div>

    `<form className=loginForm onSubmit={this.handleSubmit}>
        {error}
        <input type="text" placeholder="emdsmmail" ref="email" />
        <input type="text" placeholder="password" ref="password" />
        <input type="submit" value="Post" />
    </form>`
@Dashboard = React.createClass
render: ->
    <div>SomeText</div>

然后渲染后就像这样(我只放了代码的末尾): 组件.js

  render: function() {
var error;
if (this.state.error) {
  error = React.createElement("div", null, this.state.error);
}
    return <form className=loginForm onSubmit={this.handleSubmit}>
        {error}
        <input type="text" placeholder="emdsmmail" ref="email" />
        <input type="text" placeholder="password" ref="password" />
        <input type="submit" value="Post" />
    </form>;
}
});

this.Dashboard = React.createClass({
render: function() {
    return React.createElement("div", null, "SomeText");
}
});

如果我将直接命令与 npm cjsx -c my-component.cjsx 一起使用，则它可以使用引号( ` )正常工作。

所以首先我尝试保存我的报价(`)，但它给了我一个糟糕的结果，就像你在“表单”中看到的那样。

所以我删除了引号(`)，就像仪表板组件一样，以显示发生了什么，并且它有效；但前提是我不使用像 : ( ") 或 ( ' ) 这样的引号来表示像 'form' 上的输入这样的属性。

如果有人可以帮助我， 你给了我很好的帮助:)

感谢您的阅读。

Answer 1

我很好的解决方案，执行 1 个任务，例如: .coffee(真正的.cjsx)-> .js(真正的.jsx)-> .js(真正的.js)

所以我的 gulp 文件是这样的:

gulpfile.js

gulp.task('scripts', function ()   {
return gulp.src('dev/scripts/**/*.coffee')
    .pipe($.plumber())
    .pipe($.coffee())
    .pipe($.react())
    .pipe(gulp.dest('.tmp/scripts'))
    .pipe($.size());
});

(ps : $ = gulp-load-plugin//咖啡 = gulp-coffee// react = gulp-react)