React.js：如何将jsx与JavaScript分离

如果您不使用任何模块系统，即script仅依赖标签，则只需在全局变量中公开JSX组件，并在需要时使用它：

// component.js
var Component = React.createClass({ /* your component */ });
// main.js
React.renderComponent(Component({}), domNode);

注意：component.js的script标记必须出现在main.js的标记之前。script

If you use a Commonjs-like module system like Browserify, simply export your component definition and require it when you need it.

// component.js
var React = require("react");
module.exports = React.createClass({ /* your component */ });
// main.js
var Component = require("component.js");
React.renderComponent(Component({}), domNode);

您可以使用react-templates。它为您提供了标记和组件本身之间的这种分离，还有更多。

我发现它非常适合我的需求（大型Web应用程序）。

将模板移到单独文件中的一个问题是，如果使用以下处理程序：

var myTemplate = (
    <form onSubmit={this.handleSubmit}></form>
);

然后在您的组件中使用：

render: function() {
    return myTemplate;
}

生成的模板代码将调用this.handleSubmit（），因此“ this”将是错误的，并且处理程序将无法正常工作。您需要做的是将它们放在一个函数中，如下所示：

var myTemplate = function() {
    return (
        <form onSubmit={this.handleSubmit}></form>
    );
};

然后在组件的render函数中，您需要将其正确绑定到“ this”，然后像下面这样调用它：

render: function() {
    return myTemplate.bind(this)();
},

现在，您可以将该模板定义放在任何地方，放在单独的文件中，或者但是您想要构建和引用自己的代码。（强大的力量！不要听这些疯狂的说明性框架！:)）