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

Question

我正在将第三方库集成到我的 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;

Answer 1

如果要从 React 组件内部访问全局 scope 中定义的变量，通常可以通过window object 访问变量来实现。

请参见下面的示例：

 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>

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-03-08 11:37:36

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-03-08 11:37:36

解决方案1
1 已采纳 2021-03-08 11:37:36