在 React 中将模板分离到外部文件

我正在为客户开发 ReactJS 应用程序。我希望客户端能够自定义应用程序中的一些配置和模板。所以我创建了一个config.js file

window.APP_CONFIG = {
    url: 'example.com',
    template: {
        item: '
            <div>
                <h3>A new item title</h3>
                { item.description }
            </div>
        '       
    }
};

如何在我的 React 应用程序中使用此变量？我已尝试以下操作，但它给了我错误。

var app = React.createClass({

  render(){
     return (
       <div>
         {APP_CONFIG.template.item}
       </div>
     )
  }
})

有人做过类似的事情吗？

你并不孤单。反应模板 http://wix.github.io/react-templates/允许你使用反应without不得不忍受内联 jsx。

React-templates 语法与 jsx 非常相似，但允许您将组件 html 代码放在单独的 .rt 文件中 - 更加简洁。 RT 文件对循环和分支有更好的支持。额外的好处是，您不必围绕“class”和“for”等保留属性名称跳舞，而且还有其他优点。

来自文档：

为什么不使用 JSX？

有些人喜欢 JSX，有些人不喜欢。我们不这样做。更具体地说，在我们看来 JSX 只适合 HTML 很少的组件 里面。这可以通过在代码中创建 DOM 元素来完成。 另外，我们喜欢将代码和 HTML 分开，因为这样感觉很不错。

到目前为止我看到的主要问题是像这样的属性值onMouseDown={someJsExpr}在 jsx 中被神奇地引用，但在 React-templates 中你必须显式引用它们onMouseDown="{someJsExpr}"，没有魔法。我发现找到这样的案例并转化过来并不难。