web-dev-qa-db-ja.com

Node.jsでエラー「ウィンドウが定義されていません」

Node.jsにwindowが存在しないことは知っていますが、クライアントとサーバーの両方でReactと同じコードを使用しています。windowは存在します

キャッチされないReferenceError：ウィンドウが定義されていません

window && window.scroll(0, 0)を実行できないという事実を回避するにはどうすればよいですか？

node.jsreactjswebpackwebpack-dev-server
15
Sawtaytoes

Sawtaytoesはそれを持っています。 componentDidMount（）にあるコードを実行して、それを次のように囲みます。

if (typeof(window) !== 'undefined') {
  // code here
}

Reactがコンポーネントをレンダリングするまでにウィンドウオブジェクトがまだ作成されていない場合は、コンポーネントがレンダリングされた後、ウィンドウオブジェクトが確実に作成された後、常に1秒未満のコードを実行できますそのときまでに）ユーザーは違いを区別できません。

if (typeof(window) !== 'undefined') {
    var timer = setTimeout(function() {
        // code here
    }, 200);
}

SetTimeoutに状態を入れないようにアドバイスします。

19
Jeff Diederiks

これにより、その問題が解決されます。

_typeof(window) === 'undefined'
_

変数が定義されていない場合でも、typeof()を使用してチェックできます。

5
Sawtaytoes

この種のコードはサーバー上で実行されるべきではなく、クライアント側のみを呼び出すcomponentDidMount（ docを参照 ）フック内にある必要があります。これは、ウィンドウサーバー側をスクロールしても意味がないためです。

ただし、クライアントとサーバーの両方を実際に実行するコードの一部でウィンドウを参照する必要がある場合は、代わりにglobalを使用します（これはグローバルスコープを表します-クライアント上のwindowなど）。

3
topheman

これは少し古いですが、ES6スタイルのリアクションコンポーネントクラスでは、クライアント側でのみレンダリングするコンポーネントを定義するためのドロップインソリューションとして作成したこのクラスデコレータを使用できます。どこにでもウィンドウチェックを落とすよりも好きです。

import { clientOnly } from 'client-component';

@clientOnly
class ComponentThatAccessesWindowThatIsNotSafeForServerRendering extends Component {
    render() {
        const currentLocation = window.location;
        return (
            <div>{currentLocation}</div>
        )
    };
}

https://github.com/peterlazzarino/client-component

1
Peter Lazzarino

windowおよび関連コードをmounted()ライフサイクルフックに移動します。これは、mounted()フックがクライアント側でのみ呼び出され、windowがそこで利用できるためです。

0
JustAnotherGirl
<Router onUpdate={() => window.scrollTo(0, 0)} history= {browserHistory}>

React JSアプリで上部に新しいページを開く必要がある場合は、router.jsでこのコードを使用します

0
Andrei Fyodorov