窗口变量声明在React的index.js中不起作用

Question

I am trying to set up Heap Analytics in my React app. I have an index.js ( no custom index.html).

In the instructions, it's saying that I should put the script in between tag in the head. I assume that for my case, I just do it in index.js.

This is the script:

window.heap=window.heap||[],heap.load=function(e,t)
{window.heap.appid=e,window.heap.config=t=t||{};var r=t.forceSSL||"https:"===document.location.protocol,a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src=(r?"https:":"http:")+"//cdn.heapanalytics.com/js/heap-"+e+".js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(a,n);for(var o=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","removeEventProperty","setEventProperties","track","unsetEventProperty"],c=0;c<p.length;c++)heap[p[c]]=o(p[c])};
heap.load(MY_APP_ID);

However, heap is not defined error comes up.

What should I be doing instead?

Answer 1

I got it to work by updating the variable declarations.

var heap = [];
heap.load = ... // same as above, but all instances of window.heap are replaced with just heap
window.heap = heap;
heap.load(APP_ID)

so I think the window variable declaration doesn't play well with React. If anyone can explain to me exactly why and how my solution works but original script doesn't, please help enlighten me.