Lỗi `cửa sổ không được xác định` trong Node.js

Question

Tôi biết window không tồn tại trong Node.js, nhưng tôi đang sử dụng React và cùng mã trên cả máy khách và máy chủ. Bất kỳ phương pháp tôi sử dụng để kiểm tra xem window tồn tại lưới tôi:

Uncaught ReferenceError: window is not defined

Làm thế nào để có được xung quanh thực tế là tôi không thể làm window && window.scroll(0, 0)?

Answer 1

Xưa đã nhận được nó. Tôi sẽ chạy bất cứ mã bạn có trong componentDidMount() và bao quanh nó với:

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

Nếu đối tượng cửa sổ vẫn không được tạo ra bởi thời gian Phản ứng làm cho các thành phần, bạn luôn có thể chạy mã của bạn một phần nhỏ của một thứ hai sau khi các thành phần render (và đối tượng cửa sổ chắc chắn đã được tạo ra bởi sau đó) để người dùng không thể nói sự khác biệt.

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

Tôi khuyên bạn không nên đặt trạng thái trong setTimeout.

Answer 2

này sẽ giải quyết vấn đề đó cho bạn:

typeof(window) === 'undefined' 

Thậm chí nếu một biến không được định nghĩa, bạn có thể sử dụng typeof() để kiểm tra nó.

Answer 3

Loại mã này thậm chí không nên chạy trên máy chủ, nó phải nằm trong một số móc componentDidMount (see doc), chỉ gọi phía máy khách. Điều này là bởi vì nó không có ý nghĩa để di chuyển phía máy chủ cửa sổ.

Tuy nhiên, nếu bạn phải tham chiếu đến cửa sổ trong một phần mã thực sự chạy cả máy khách và máy chủ, hãy sử dụng global thay thế (đại diện cho phạm vi toàn cầu - ví dụ: window trên máy khách).

Answer 4

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

nếu bạn cần để mở trang mới trên đầu trang trong Phản ứng ứng dụng JS, sử dụng mã này trong router.js

Answer 5

Đây là lớn hơn một chút nhưng đối với phong cách ES6 phản ứng lớp thành phần mà bạn có thể sử dụng lớp trang trí này Tôi tạo ra như là một giọt trong giải pháp để xác định các thành phần mà chỉ nên render ở phía khách hàng. Tôi thích nó tốt hơn là thả kiểm tra cửa sổ ở khắp mọi nơi.

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