渲染同构阵营这需要窗口对象

Question

我有一个同构阵营应用程序组件，以在服务器侧被呈现组件。我希望使用第三方阵营组成：（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 

我可以渲染起反应，因此使用窗口对象的组件，在服务器上如果是这样，做什么我需要做的来解决这个错误

Answer 1

不要使用依靠windo的图书馆w在你的组件中。 或 仅在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 
} 

我已经在服务器端渲染的组件中多次使用过它，它的作用就像一个魅力。