使用反应和需求

最近，我开始使用 reactjs和 backbonejs路由器来构建一个应用程序。

我通常使用 requirejs进行依赖项和代码管理。但是，当我试图包含包含 jsx语法的文件时，问题就出现了。

这是我目前为止的 router.js:

define(["backbone", "react"], function(Backbone, React) {


var IndexComponent = React.createClass({
render : function() {
return (
<div>
Some Stuff goes here
</div>
);
}
});






return Backbone.Router.extend({
routes : {
"": "index"
},
index : function() {
React.renderComponent(<IndexComponent />, document.getElementById('index'));
}
});
});

如何将 IndexComponent 放在它自己的文件中并在这个文件中调用它？我已经尝试了通常的方法(与我在主干和反应中使用的方法相同) ，但是由于 jsx语法而得到一个错误。

50113 次浏览
小开
最佳答案

所以我自己想出来的。

我得到了必要的文件和说明，从这个回购: Jsx- 需求 js-插件。

一旦我有了 Jsx 插件和修改过的 JSX 变压器版本，我就按照存储库中的指示修改了代码:

require.config({
// ...


paths: {
"react": "path/to/react",
"JSXTransformer": "path/to/JSXTransformer",
"jsx": "path/to/jsx plugin"
...
}


// ...
});

然后，我可以通过 jsx!插件语法引用 JSX 文件。例如，要加载组件目录中的 Timer.jsx 文件:

require(['react', 'jsx!components/Timer'], function (React, Timer) {
...
React.renderComponent(<Timer />, document.getElementById('timer'));
...
});

我还可以使用相同的代码访问包含 jsx语法的 .js文件:

require(['react', 'jsx!components/Timer'], function (React, Timer) {
...
React.renderComponent(<Timer />, document.getElementById('timer'));
...
});

另外，我不需要使用 jsx语法将 /** @jsx React.DOM */放在文件的顶部。

希望能有帮助。

小开

反应工具(包括 JSX)已经被弃用，而倾向于 Babel (https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html)。我不能找到一个没有“透明”步骤的方法来做到这一点，所以这是我咕哝的解决方案。

您可以安装 grunt-babel (npm install grunt-babel)并配置如下任务:

babel: {
options: {
sourceMap: false,
modules: "common"
},
dist: {
files: [{
expand: true,
src: ['js/components/*.jsx'],
dest: 'dist',
ext:'.js'
}]
}
}

只要把它添加到你的繁琐任务列表中:

grunt.registerTask('default', ['clean', 'copy', 'babel', 'http-server']);

Babel 将把您的 JSX 传输到 JS 文件，这些文件可以指定为 RequreJS 依赖项，而不需要进行额外的配置。


提交答案