Reactサーバサイドレンダリングのウィンドウ、ドキュメント、ローカルストレージ

Question

私のリアクションアプリケーションでは、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はこのディレクトリscratch.Doを作成しました。つまり、ブラウザlocalStorageは現在使用されません。

私はドキュメント変数をコンソールに試してみて、問題を作成している文書変数の代わりに使用されている場合にも、コンソール文はこれを与える：

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は未定義を返し、要素は必要ではありません。これをどうやって解決するのですか？

Answer 1

基本的に、JSDomなどは、偽 NodeJS内のブラウザのウィンドウとドキュメントをご希望の場合にのみ使用してください。これはテストを実行するときに有効です。私は前にnode-localstorageを見たことはありませんでしたが、私もこのパッケージに当てはまると思います。

クライアント上（ブラウザ内）でアプリ内でこれらのパッケージを実行したくないのは確かです。

あなたが持っているエラーは指定されていませんが、ノードであなたのアプリを実行しようとしていると推測できますか？

あなたのアプリから完全に削除して、エラーが発生した場所を確認することをお勧めします。次に、エラーを1つずつ解決します。まず、componentDidMountなどを使用して、クライアントでそのコードを実行するようにしてください。

アプリがクライアントとサーバーで動作したら、サーバー上でレンダリングされる量を改善/増加させる方法を調べることができます。