Окно получения не определено в ReactJs

Question

Я получаю ошибку: "ReferenceError: window is not defined" по реакции.

Ниже мой код:

import React from 'react';
import styles from './Header.css';
import withStyles from '../../decorators/withStyles';
import Link from '../../utils/Link';
import SignInMenu from './SignInMenu';
import UserMenu from './UserMenu';
import Navigation from '../Navigation';
import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';

@withStyles(styles)
class Header extends React.Component {

  constructor() {
    super();
    return {
      windowWidth: 0,
      windowHeight: 0
    };
  }

  componentDidMount() {
    this.setState({
      windowWidth: window.innerWidth,
      windowHeight: window.innerHeight
    });
  }

  render() {
     let windowWidth = this.state.windowWidth;
     let windowHeight = this.state.windowHeight;

     if (windowWidth < 1000) {
       let header = (<div>mobile</div>);
     }  else {
       let header = (<div>desktop</div>);
    }
  }

Я пытаюсь сделать разные представления для настольных и мобильных устройств и только начинаю с React. Я не уверен, что я делаю это правильно, следовал некоторым руководствам онлайн и застрял здесь. Есть идеи, что я делаю не так? Спасибо

Answer 1

Ваша проблема может быть в вашем конструкторе.

    constructor() {
      super();
      this.state = {
        windowWidth: 0,
        windowHeight: 0
      };
    }