将 reactjs 与 requirejs 一起使用

发布于04月30日

最近，我开始使用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放在自己的文件中，并在这个文件中调用它？我try 了通常的方法(与我在主干和react中使用的方法相同)，但由于jsx个语法错误.

推荐答案

所以我自己想出来了.

我从这份报告中得到了必要的文件和说明:jsx-requirejs-plugin.

当我有了jsx plugin并修改了JSXTransformer版本后，我按照存储库中的说明更改了代码:

require.config({
  // ...

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

  // ...
});

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

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

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

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

此外，我不需要使用jsx语法在文件顶部放置/** @jsx React.DOM */.

希望有帮助.