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()); 
});

component.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>

渲染之后就是这样（我只是把代码放在最后）： component.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'.

中看到的那样

所以我删除了引号 ( ` )，就像仪表板组件中的一个一样，以显示发生了什么，它是有效的；但前提是我不对 '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 // coffee = gulp-coffee // react = gulp-react)

Gulp CJSX 错误渲染编译

Gulp CJSX Error render compilation

javascript

preprocessor

coffeescript

reactjs

gulp