时间戳

首页 > 解决方案 > 通过外部 JS 将配置对象包含到 React EJS 文件中

javascript - 通过外部 JS 将配置对象包含到 React EJS 文件中

问题描述

我对许多 React 概念还比较陌生，所以这可能是我仍然不熟悉的东西……所以请耐心等待。

我有一个 React 项目，目前使用两个相关品牌的多个 EJS 文件，现在需要我在代码中分离品牌，以便我有通用代码并将品牌之间的任何差异转换为一系列配置文件，所以一旦在加载文档时确定了特定品牌，就可以加载适当的配置文件并插入配置值......因此，尽可能不基于品牌进行分支。

一个这样的主模板文件具有以下设置：

<% require(`../../config/${process.env.BRAND}/P_Display_Locations.js`) %>
<%= require('../layout/page_header.ejs')() %>
<%= require('../components/display-locations-dev-data.ejs')() %>
<%= require('../components/display-locations-header.ejs')() %>
<%= require('../components/display-locations-map.ejs')() %>
<%= require('../components/display-locations-centres.ejs')() %>
<%= require('../layout/page_footer.ejs')() %>

所以在这种情况下，根据品牌，无论是ABC还是XYZ，都可以加载适当的配置文件../../config/ABC/P_Display_Locations.js，例如......

但是，似乎即使文件正在被解析（我已经通过强制错误更改模板中的文件路径来检查），所以我知道我正确引用了路径，似乎对象没有被传递到模板的其余部分。

例如， 的内容../../config/ABC/P_Display_Locations.js如下：

const P_DISPLAY_LOC = {
  cfg: {
    heading: "Display Homes"
  }
};

但是，当我尝试以下列方式将 的值渲染P_DISPLAY_LOC.cfg.heading到<h1>标签中时：../components/display-locations-header.ejs

<h1 class="c-page-header__heading ">
  <%= P_DISPLAY_LOC.cfg.heading %>
</h1>

...我收到以下错误：

ERROR in Template execution failed: ReferenceError: P_DISPLAY_LOC is not defined

ERROR in   ReferenceError: P_DISPLAY_LOC is not defined

这引出了问题，a）我到底做了什么导致我认为正确引用的值不被应用程序读取，以及 b）我如何或者 i）改变我在其中引用配置文件的设置模板文件，ii) 更改实际的配置文件，或 iii) 更改调用配置变量的方式，以确保在执行时正确引用它？

提前致谢。

标签： javascriptreactjsconfigurationejs

解决方案

推荐阅读