我已经建立了一个reactjs网站,并试图使其能够部署。
现在,所有配置都是通过导入到所有模块中的config.js完成的。
但是,当我构建应用程序时,它会被编译到部署js中,并且是不可配置的。
我想拥有一个单独的文件,系统管理员可以根据其环境配置各种设置,例如API端点(该应用程序可能与后端未在同一服务器上运行,并且将无法访问DNS )。
有办法做到这一点吗?我也不希望为此使用第三方库。
我设法破解了一个解决方案。
在公用文件夹“ 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传递到层次结构中即可在您的代码中使用。