ReactJS中的全局变量

我们目前正在进行一个学校项目，我们有一部分应用程序是“外部的”。（仅用于显示图形） 因此，/graph文件夹现在位于/src文件夹中，在编译react应用程序时，我们会收到大量导入错误。

---

有没有办法绕过这些导入，只使用已经实现的全局变量

不建议使用全局变量，但您可以简单地使用window对象保存变量，例如window.myGlobalVar=3。此外，还可以使用react上下文。

react中的全局变量可以使用webpack.config.js文件实现

在webpack配置文件中声明全局变量

i、 e.

constapi\u URL=JSON.stringify（'http://api:8080');此外，您需要向webpack添加新插件，以便整个应用程序都可以访问此全局变量

new webpack.DefinePlugin({ //defining gloabl variable
        API_URL,
});

但是撇开全局变量不谈，如果只是想消除组件和模块导入错误，那么您可以简单地为
.babelrc
文件中的组件和模块设置别名。这样，您就不需要编写
'../../../something'
，只需编写
'something'

{
"presets": ["react", "es2015", "stage-0"],

"plugins": [
    ["module-resolver", {
      "root": ["./src"],
      "alias": {
        "src": "/",
        "components": "/components",
        "actions": "/actions",
        "containers": "/containers",
        "images": "/images",
        "reducers": "/reducers",
        "styles": "/styles",
        "utils": "/utils",
      }
    }]
]
}}

这是一个示例
.babelrc
文件，其别名用于组件和其他文件夹。现在，从应用程序中的任何地方，如果我从“组件/某物”

编写

import{Something}，我的应用程序将知道在哪里可以找到它。无需编写“
”../../../components/Something”
您可以尝试以下方法：

Parent.js

var myVar = {}

class MyComponent extends Component {

...
...
myVar = new Object();
...
...
render() {
   return <div>
                 \\ children
                 <MyLeftBranch myVar={myVar} />
                 <MyRightBranch myVar={myVar} />
              </div>
}
}

export default MyComponent;

Webpack
ProvidePlugin
听起来很适合定义一组全局变量。同时检查网页
externals
class Child extends Component {
     { myVar } = this.props;
     \\use myVar
}