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

不要使用依赖于组件窗口的库。要么仅在@Requestbody中使用这些库并将其排除在预渲染之前（确保您的组件在预渲染中不会呈现不同或它不起作用）。

我认为我不应该在类定义之外导入库，而是在componentDidMount方法或其调用方法中要求它。

所以，而不是：

componentDidMount

我做了：

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

Answer 2

是的，你可以！

在定义窗口之前，不要运行那段代码！我还想象你可以在componentDidMount（）生命周期函数中使用这些函数。

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

我在服务器端呈现的组件中多次使用它，它就像魅力一样。

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

2 个答案: