小编典典

反应配置文件以进行后期部署设置

reactjs

我已经建立了一个reactjs网站,并试图使其能够部署。

现在,所有配置都是通过导入到所有模块中的config.js完成的。

但是,当我构建应用程序时,它会被编译到部署js中,并且是不可配置的。

我想拥有一个单独的文件,系统管理员可以根据其环境配置各种设置,例如API端点(该应用程序可能与后端未在同一服务器上运行,并且将无法访问DNS )。

有办法做到这一点吗?我也不希望为此使用第三方库。


阅读 211

收藏
2020-07-22

共1个答案

小编典典

我设法破解了一个解决方案。

在公用文件夹“ config.js”中

var config = {
      x: 'y',
};

接下来将ReactDOM.render(App / index.js打包成这样的功能

window.RenderApp = (config) => {
   ReactDOM.render(<App _config={config}/>, document.getElementById('root'));
}

在index.html中添加这些行,window.RenderApp必须位于末尾,因为它依赖于被导入的bundle.js,该包是由react自动添加的,并且在生产中具有随机名称。

</html>
...
<head>
...
<script type="text/javascript" src="%PUBLIC_URL%/config.js"></script>
...
</head>
...
<body>
...
</body>
<script>
   window.RenderApp(config);
</script>
</html>

最后在您的App.js或您曾经使用的配置中使用配置变量

...
constructor(props) {
    super(props)
    console.log(this.props._config)
    this.state = {
       ....
       config: this.props._config,
   }
}
...

我发现您必须将config设置为状态变量,否则它将为对象随机抛出undefined,现在只需将config传递到层次结构中即可在您的代码中使用。

2020-07-22