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

小编典典

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

reactjs

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

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

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

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

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

阅读 213

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