如何声明一个全局变量并在 ReactJS 的所有其他模块中访问它?

How to declare a global variable and access it in all the other modules in ReactJS?

作为 ReactJS 的新手,我需要有关全局变量声明和使用的帮助。场景是我有不同的模块,我想访问一个在所有模块中都可用的变量,而不管它们之间的关系如何。准确地说,我有一个管理面板和一个没有共同父级的用户仪表板。但是,我希望在管理面板中设置一个变量的值,并在用户仪表板和其他模块中使用该值。我尝试寻找解决方案,但找不到可行的解决方案。如果使用示例解释解决方案,那将是一个很大的帮助。

不确定您的确切用例和最适合您的情况,但有几种模式更适合 React 的概念,它们提供了在不同组件中使用共享变量的能力:

  • 在顶级容器组件中声明一个变量,并通过 props 将其传递给所需的子项。
  • 使用状态管理器(Redux、Mobx 等)并从任何组件访问状态(任何类型的数据)。
  • Context API

为这两个组件创建父级并在它们之间传递状态解决了我的问题。对于我的用例,我将管理主页组件(设置状态的位置)和用户登录组件(我必须访问状态的位置)定义为一个公共父组件,并将该父组件定义为应用程序(其中所有其他组件被定义)。这解决了我访问组件状态并将其提供给另一个没有共同关系的组件的问题。