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

Question

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

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>
     )
  }
})

有人做过类似的事情吗？

Answer 1

你并不孤单。 React Templates允许您使用 React，而无需忍受内联 jsx。

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

来自文档:

Why not use JSX?

Some love JSX, some don't. We don't. More specifically, it seems to us that JSX is only a good fit for components with very little HTML inside. And this can be accomplished by creating DOM elements in code. Also, we like to separate code and HTML because it just feels right.

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