如何在反应中使用全局变量？

Question

我需要使用其他来源的虚拟助手（并且需要使用这个 vars

<script>
        var chat_client = 'big',
            chat_mode=2,
            ailabs_user_id = null,
        ailabs_user_info  = {'user_intent_category_label':'DEFAULT', 'info_fullname':'Ержанов Ануар Толегенович', 'info_iin':'921102350927', 'info_phone_number':'87473096538'};
    </script>

我如何在 React 中使用它并在全局变量中使用它，以便有机会从模板中使用它？ 当我尝试使用 Header 组件中的 var 时，出现错误（未定义）
我需要使用'info_fullname':{employee.fullname}

Answer 1

您可以使用window.variableName访问所有全局变量， window是浏览器环境中的global对象。

使用全局变量的更好方法是将其与 Webpack external配置一起使用。

Webpack 外部参考

Answer 2

为什么不尝试使用Context ？

您可以在任何父组件中声明一个全局上下文变量，并且可以通过 this.context.varname 在整个组件树中访问该变量。 您只需要在父组件中指定 childContextTypes 和 getChildContext，然后您可以通过在子组件中指定 contextTypes 从任何组件使用/修改它。

但是，请注意文档中提到的这一点：

我们可以使用 window 关键字创建全局变量。

window.$name = 'king' //global variable

现在我们可以从我们的组件访问全局变量window.$name 。

function App() {
  const name = window.$name;
  console.log(name); // 'king'

  return (
    <div>
      <h1>{name}</h1>
    </div>
  );
}