渲染需要窗口对象的同构React组件

Question

我有一个同构的React应用程序,组件在服务器端呈现.我希望使用第三方React组件:(GraphiQL),并且呈现如下:

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

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

但是,此组件使用window对象: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();
    }
    ...
}