Я знаю, что window не существует в Node.js, но я использую React и тот же код как на клиенте, так и на сервере. Любой метод, который я использую для проверки существования window, меняет:
Неподготовлено ReferenceError: окно не определено
Как мне обойти тот факт, что я не могу сделать window && window.scroll(0, 0)?
Sawtaytoes получил это. Я бы запустил любой код, который у вас есть в componentDidMount(), и окружает его с помощью:
if (typeof(window) !== 'undefined') {
// code here
}
Если объект окна по-прежнему не создается к моменту, когда React отображает компонент, вы всегда можете запустить свой код через секунду после того, как компонент визуализирует (и оконный объект определенно был создан к тому времени), поэтому пользователь не могу сказать разницы.
if (typeof(window) !== 'undefined') {
var timer = setTimeout(function() {
// code here
}, 200);
}
Я бы посоветовал не устанавливать состояние в setTimeout.
Это позволит решить эту проблему:
typeof(window) === 'undefined'
Даже если переменная не определена, вы можете использовать typeof() для ее проверки.
Этот тип кода не должен быть запущен на сервере, он должен находиться внутри некоторого componentDidMount (см. документ), который вызывает только клиентскую сторону. Это связано с тем, что не имеет смысла прокручивать сторону окна сервера.
Однако, если вам нужно ссылаться на окно в части вашего кода, который действительно запускает как клиент, так и сервер, вместо этого используйте global (который представляет глобальную область действия - например, window на клиенте).
<Router onUpdate={() => window.scrollTo(0, 0)} history= {browserHistory}>
если вам нужно открыть новую страницу поверх приложения React JS, используйте этот код в файле router.js
Это немного старше, но для классов компонентов реагирования в стиле ES6 вы можете использовать этот декоратор класса, который я создал как решение для определения компонентов, которые должны отображаться только на стороне клиента. Мне это нравится лучше, чем вскрытие оконных проверок везде.
import { clientOnly } from 'client-component';
@clientOnly
class ComponentThatAccessesWindowThatIsNotSafeForServerRendering extends Component {
render() {
const currentLocation = window.location;
return (
<div>{currentLocation}</div>
)
};
}