Question

在我的React应用程序中，我使用window对象，document对象和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创建了这个目录。这意味着浏览器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而不是它应该的元素。我该如何解决这个问题？

Answer 1

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

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

您还没有指定您有哪些错误，但我只能猜测您是在尝试在节点中运行您的应用？

我建议您完全从应用中删除所有内容，并查看错误发生的位置。然后逐一解决错误。首先，请确保您只使用componentDidMount或类似的东西在客户端上运行该代码。

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

React服务器端渲染中的窗口，文档和本地存储

1 个答案: