ReactJ中的全局变量

Question

我们目前正在从事一个学校项目，我们拥有"外部"的应用程序的一部分。（只是用于显示图）因此，该/Graph文件夹现在在/SRC文件夹中，并且在编译React应用程序时，我们会得到大量的导入错误。有没有办法绕过这些导入并仅使用已经实现的全局变量？

Answer 1

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

在WebPack配置文件中声明您的全局变量。

即。const API_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 } from 'components/Something'，则从应用程序中的任何位置，我的应用将知道在哪里可以找到它。无需写'../../../components/Something'

Answer 2

使用全局变量，但您可以简单地使用窗口对象保存变量，例如window.myglobalvar = 3。p>

Answer 3

您可以尝试以下方法：

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;

child.js

class Child extends Component {
     { myVar } = this.props;
     \use myVar
}