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

IT技术 reactjs
2021-04-26 15:48:22

我正在为客户开发 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>
     )
  }
})

有人做过类似的事情吗?

1个回答

你并不孤单。 React Templates允许你使用 react不必忍受内联 jsx。

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

从文档:

为什么不使用 JSX?

有些人喜欢 JSX,有些人不喜欢。我们没有。更具体地说,在我们看来,JSX 只适合内部包含很少 HTML 的组件。这可以通过在代码中创建 DOM 元素来实现。此外,我们喜欢将代码和 HTML 分开,因为这感觉很对。

到目前为止,我看到的主要问题是属性值onMouseDown={someJsExpr}在 jsx 中被神奇地引用,但在 react-templates 中,你必须明确地引用它们 la onMouseDown="{someJsExpr}",没有魔法。我发现找到这样的案例并转换它们并不难。