त्रुटि `खिड़की Node.js

Question

मैं जानता हूँ कि window Node.js में मौजूद नहीं है में defined` नहीं है, लेकिन मैं प्रतिक्रिया और दोनों क्लाइंट और सर्वर पर एक ही कोड का उपयोग कर रहा हूँ।

Uncaught ReferenceError: window is not defined

कैसे मैं इस तथ्य के आसपास मिलता है कि मैं window && window.scroll(0, 0) ऐसा नहीं कर सकते: किसी भी विधि मैं मुझे अगर window जाल मौजूद है की जाँच करने के लिए उपयोग?

Answer 1

Sawtaytoes यह मिल गया है। मैं जो कुछ भी कोड आप componentDidMount (की तरह चलना होगा) और साथ उस पर घेरा:

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

तो विंडो ऑब्जेक्ट अभी भी समय से नहीं बनाया जा रहा है प्रतिक्रिया घटक प्रस्तुत हुई है, तो आप हमेशा अपने कोड एक का एक अंश चला सकते हैं घटक प्रस्तुत करने के बाद दूसरा (और विंडो ऑब्जेक्ट निश्चित रूप से तब तक बनाया गया है) ताकि उपयोगकर्ता अंतर नहीं बता सके।

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

मैं सेटटाइमआउट में राज्य डालने के खिलाफ सलाह दूंगा।

Answer 2

यह आप के लिए कि इस मुद्दे का निपटारा करेगा:

typeof(window) === 'undefined' 

यहां तक ​​कि अगर एक चर परिभाषित नहीं है, आप typeof() यह जांच करने के लिए उपयोग कर सकते हैं।

Answer 3

इस प्रकार का कोड सर्वर पर भी नहीं चलना चाहिए, यह componentDidMount (see doc) हुक के अंदर होना चाहिए, जो केवल क्लाइंट पक्ष का आह्वान करता है। ऐसा इसलिए है क्योंकि विंडो सर्वर पक्ष को स्क्रॉल करने के लिए यह समझ में नहीं आता है।

लेकिन, आप अपने कोड का एक हिस्सा है कि वास्तव में दोनों क्लाइंट और सर्वर चलाता में खिड़की के संदर्भ के लिए है, global बजाय का उपयोग करें (जो वैश्विक क्षेत्र का प्रतिनिधित्व करता है - जैसे क्लाइंट पर window)।

Answer 4

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

यदि आप शीर्ष पर नए पेज खोलने के लिए जे एस एप्लिकेशन प्रतिक्रिया में की जरूरत है, router.js

Answer 5

में इस कोड का उपयोग यह एक छोटे से पुराना है लेकिन 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