Gulp CJSX错误渲染编译

问题描述

我正在用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”上的输入之类的属性使用引号：（“）或（'）时。

如果有人可以帮助我，您会给我一个很好的帮助:)

谢谢阅读。