1

在我的 React 应用程序中，我使用windowobject 、documentobject 和localStorage.

为避免错误，我将其设置为：

var jsdom = require("jsdom");

var doc = jsdom.jsdom("");

if (typeof localStorage === "undefined" || localStorage === null) {
  var LocalStorage = require('node-localstorage').LocalStorage;
  localStorage = new LocalStorage('./scratch');
  global.localStorage = localStorage;

}

var win = doc.defaultView

console.log("document default viewwwwwwwwwwwwwwwwww", doc);

global.document = doc
global.window = win

function propagateToGlobal (window) {
    for (let key in window) {
        if (!window.hasOwnProperty(key)) continue
        if (key in global) continue

        global[key] = window[key]
    }
}

propagateToGlobal(win)

但是在我的应用程序中，我希望使用真实的窗口、真实的 localStorage 和真实的文档，而不是我上面设置的内容。

localStorage创建了这个目录scratch.是不是说浏览器localStorage现在不能用了？

此外，如果我尝试控制台 doc 变量并用于代替正在产生问题的文档变量，则控制台语句会给出此信息：

Document { location: [Getter/Setter] }

这是我的脚本：

<script dangerouslySetInnerHTML={{__html:(function(w,d,s,l,i){
        console.log(d.getElementsByTagName(s)[0]);
       w[l]=w[l]||[];
        w[l].push({'gtm.start':
          new Date().getTime(),event:'gtm.js'});
          var f=d.getElementsByTagName(s)[0],
          j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
           j.async=false;
        j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;
        console.log("f is",f);
        f.parentNode ? f.parentNode.insertBefore(j,f) : false;
      })(window,document,'script','dataLayer','ID')}}/>

这里 getElementByTagName 返回 undefined 而不是应有的元素。我该如何解决？

4

1 回答 1

1

基本上，只有当你想在 NodeJS 中伪造浏览器的窗口和文档时，才应该使用 JSDom 等。这在运行测试时有效。我以前没有见过 node-localstorage，但我怀疑这个包也是如此。

当在客户端（在浏览器中）时，您当然不希望任何这些包在您的应用程序中运行。

您尚未指定您有哪些错误，但我只能猜测您正在尝试在节点中运行您的应用程序？

我建议将它们从您的应用程序中完全删除，并查看错误出现在哪里。然后一一解决错误。首先确保您仅通过使用componentDidMount或类似的方式在客户端上运行该代码。

一旦应用程序在客户端和服务器上运行，您就可以查看如何改进/增加在服务器上呈现的数量。

于 2017-01-18T23:09:47.640 回答