Question

我必须在名为 etracker 的 React 应用程序中使用旧的电子跟踪器脚本。

要工作，您必须包含一个 script 标签，它将加载 js sdk 并设置一些全局函数：

<head>
  <script
    id="_etLoader"
    type="text/javascript"
    data-secure-code="XXXXXX"
    src="//static.etracker.com/code/e.js"
  />
</head>

然后您可以使用 et_eC_Wrapper 等全局函数来触发一些跟踪事件：

et_eC_Wrapper({ et_et: 'XXXXXX', et_pagename: '/my-page-slug' })

问题是，当我使用此函数时，可能会发生 et_eC_Wrapper 尚未设置的情况。 useEffect 钩子中的示例：

  React.useEffect(() => {
    try {
      console.log("success: ", et_eC_Wrapper);
    } catch (error) {
      console.log("error:", error);
    }

    setTimeout(() => {
      try {
        console.log("success: ", et_eC_Wrapper);
      } catch (error) {
        console.log("error:", error);
      }
    }, 3000);
  }, []);

您将在控制台中看到：

<块引用>

错误：ReferenceError：et_eC_Wrapper 未定义

<块引用>

成功：ƒ(){}

我知道如果设置了 setInterval 函数，我可以使用 et_eC_Wrapper 来检查每一秒，但是否有更多的“反应方式”来处理它？</p>

Answer 1

您可以动态加载 script。

将此代码放在要使用 component 的 script 中。或者，如果您想在 1 个以上的文件中使用该脚本，则将此代码放在 App 或 Header 组件中的某处。

<块引用>

加载 isScriptLoaded 后将 true 设置为 script。然后，您可以使用此 isScriptLoaded 来呈现依赖于 script 的内容。

const [isScriptLoaded, setIsScriptLoaded] = useState(false);

useEffect(() => {
    loadScript('script.js'); // your script url
}, [])


const loadScript = (src) => {
    let script = document.createElement('script');
    script.src = src;    
    document.body.append(script);
    script.onload = () => { 
      setIsScriptLoaded(true); // setting flag true here
    };
}

等待全局函数初始化的反应方式

1 个答案: