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的direct命令，它可以正常使用quote（`）。

所以首先我尝试保存我的引语（`），但它给了我一个糟糕的结果，就像你可以看到的那样＆＃39;。

所以我删除引用（`）就像仪表板组件一样，以显示它发生了什么，并且它的工作原理;但是，只有当我不使用引用时：（＆＃34;）或（＆＃39;）等属性，例如输入＆＃39;表格＆＃39;。

如果有人可以帮助我，你给了我一个很好的帮助：）

感谢阅读。

Answer 1

我很好的解决方案，让1个任务像： .coffee（real .cjsx） - ＆gt; .js（real .jsx） - ＆gt; .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错误呈现编译

1 个答案: