时间戳

首页 > 解决方案 > 访问 React 组件中定义的变量或外部脚本

javascript - 访问 React 组件中定义的变量或外部脚本

问题描述

我正在将第三方库集成到我的 React 应用程序中。他们提供了我需要添加到我的脚本<head>：

索引.html

<head>
    <script>
      var externalVariable1 = externalVariable1 || {};
      var externalVariable2 = externalVariable2 || {};
    </script>
    // tag.min.js gives value to these variables
    <script async src="//example.com/tag.min.js"></script>
</head>

我需要从我的组件中访问这两个变量。我尝试了以下但我得到'externalVariable1' is not defined错误。有什么想法吗？

MyScreen.js

import React from 'react';

const MyScreen = () => {
    
    return (
        <React.Fragment>
            <div>
                <h2>Hello!</h2>
            </div>
    
            <div id='myId'>
                {externalVariable.push(function() { externalVariable2.display();})}
            </div>
        </React.Fragment>
    );

}

export default MyScreen;

标签： javascriptreactjs

解决方案

如果您想从 React 组件内部访问定义在全局范围内的变量，通常可以通过window对象访问变量来实现。

请参见下面的示例：

function App(){
  return <h1>The secret is {window.secret}</h1>
}

ReactDOM.render(<App />, document.getElementById("root"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<!-- Adding some global variables outside of React -->
<script>
var secret = "hello";
</script>

<div id="root"></div>

推荐阅读