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 はこのディレクトリをスクラッチで作成しました。これは、ブラウザの 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

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

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

どのエラーが発生したかを特定していませんが、ノードでアプリを実行しようとしていると推測できますか?

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

アプリがクライアントとサーバーで動作するようになったら、サーバーでレンダリングされる量を改善/増やす方法を検討できます。

于 2017-01-18T23:09:47.640 に答える