Ошибка `window not defined` в Node.js

Я знаю, что window не существует в Node.js, но я использую React и тот же код как на клиенте, так и на сервере. Любой метод, который я использую для проверки существования window, меняет:

Неподготовлено ReferenceError: окно не определено

Как мне обойти тот факт, что я не могу сделать window && window.scroll(0, 0)?

Ответы

Ответ 1

Sawtaytoes получил это. Я бы запустил любой код, который у вас есть в componentDidMount(), и окружает его с помощью:

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

Если объект окна по-прежнему не создается к моменту, когда React отображает компонент, вы всегда можете запустить свой код через секунду после того, как компонент визуализирует (и оконный объект определенно был создан к тому времени), поэтому пользователь не могу сказать разницы.

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

Я бы посоветовал не устанавливать состояние в setTimeout.

Ответ 2

Это позволит решить эту проблему:

typeof(window) === 'undefined'

Даже если переменная не определена, вы можете использовать typeof() для ее проверки.

Ответ 3

Этот тип кода не должен быть запущен на сервере, он должен находиться внутри некоторого componentDidMount (см. документ), который вызывает только клиентскую сторону. Это связано с тем, что не имеет смысла прокручивать сторону окна сервера.

Однако, если вам нужно ссылаться на окно в части вашего кода, который действительно запускает как клиент, так и сервер, вместо этого используйте global (который представляет глобальную область действия - например, window на клиенте).

Ответ 4

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

если вам нужно открыть новую страницу поверх приложения React JS, используйте этот код в файле router.js

Ответ 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