Визуализация изоморфного компонента React, который требует объекта окна

Question

У меня есть изоморфное приложение React, компоненты которого отображаются на стороне сервера. Я хочу использовать сторонний компонент React: ( GraphiQL) и выполняю рендеринг как таковой:

var GraphiQLComponent = React.createElement(GraphiQL, { fetcher: graphQLFetcher}, "");

router.get('/graphiql', function (req, res) {
  res.send(ReactDOMServer.renderToString(GraphiQLComponent));
});

Однако этот компонент использует объект окна: window.localStorage а также window.addEventListener и когда я пытаюсь загрузить страницу в браузере, я получаю сообщение об ошибке:

ReferenceError: window is not defined

Могу ли я отобразить компоненты React, которые используют объект окна, на сервере? Если это так, что мне нужно сделать, чтобы устранить эту ошибку?

Answer 1

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

Я решил, что не следует импортировать библиотеку за пределы определения класса, а вместо этого требовать ее в componentDidMount метод или его вызываемый метод.

Итак, вместо:

...
import MyWindowDependentLibrary from 'path/to/library';
...
export default class MyClass extends React.Component {
    ...
    componentDidMount() { MyWindowDependentLibrary.doWork(); }
    ...
}

Я сделал:

// removed import
...
export default class MyClass extends React.Component {
    ...
    componentDidMount() {
        const MyWindowDependentLibrary = require( 'path/to/library' );
        MyWindowDependentLibrary.doWork();
    }
    ...
}

Answer 2

Да, ты можешь!

Только не запускайте этот кусок кода, пока не определено окно! Я также представляю, что вы можете использовать эти функции в функции жизненного цикла componentDidMount().

if (window !== 'undefined') {
    // do your window required stuff
}

Я использовал это несколько раз в компонентах, отображаемых на стороне сервера, и это работает как шарм.