Question

我需要在一个更大的遗留应用程序中托管一个react应用程序，它有一些全局变量，我可以在部署时访问这些变量（在具有全局变量的js文件单独定义之后，我引用react app的js文件）。

显然，我尝试构建一个试图引用未定义变量的应用程序时出错（更不用说我无法在本地开发而无法访问它们）。什么是解决这个问题的最佳解决方案/我如何才能为开发注入这些全局变量（甚至虚拟值）？

Answer 1

这可能是在您的react应用程序中使用现有全局变量的工作之一。

在Main.js（您的React App的入口点）

从窗口对象中读取全局变量，例如主机名

const hostName = window.hostname;

将其作为道具传递给组件，然后将其作为道具传递给所有组件。

ReactDOM.render(<Page hostname={hostName} />, document.getElementById('main'));

希望有所帮助：）

Answer 2

我会将它们作为道具传递给我的根组件。这是以结构化方式将数据导入React应用程序的实际方法。但是，我还会编写一些适配器组件，它能够读取全局命名空间并创建传递到该根组件的道具。通过这种方式，您可以选择在任何一个变量不存在的情况下执行操作，或者如果您正在开发中，请使用您想要的任何值填充它们。

<GlobalVarAdapter variables={['name1', 'name2', 'name3']} />

在GlobalVarAdapter中执行您需要的任何逻辑以确定env或获取全局变量，然后在render函数中将这些规范化值作为props传递到先前的根组件中。

还有其他方法可以设置GlobalVarAdapter，以便您的根组件可以声明为GlobalVarAdapter的子项而不是嵌入式，但只是导入它并使用props渲染它是最简单的。

Answer 3

如果您正在使用webpack，我建议您尝试extended-define-webpack-plugin

// webpack.config.js 
import ExtendedDefinePlugin from 'extended-define-webpack-plugin';

// pass NODE_ENV as env to the app
const env = process.env.NODE_ENV;
const appGlobals = {env};
if (env !== 'production') {
  Object.assign(appGlobals, {
    foo: 'bar' //add whatever variables you need
  });
}

const webpackConfig = {
  // ... 
  plugins: [
    /* ..., */
    new ExtendedDefinePlugin(appGlobals)
  ]
}

整个网络包

可以访问appGlobals的所有内容

仅在React中开发的全球变量

3 个答案: