小编典典

在React中,如何检测我的组件是从客户端还是从服务器渲染?

reactjs

我正在构建同构应用程序,但是我正在使用仅在客户端上呈现的第三方组件。因此,特别是对于此组件,仅在客户端渲染时才需要渲染。

如何检测我是在客户端还是在服务器上?我正在寻找类似isClient()或的东西isServer()


阅读 355

收藏
2020-07-22

共1个答案

小编典典

在内部,React使用一个ExecutionEnvironment为此调用的实用程序。它实现了一些有用的属性,例如canUseDOMcanUseEventListeners。该解决方案本质上只是此处所建议的。

实施 canUseDOM

var canUseDOM = !!(
  (typeof window !== 'undefined' &&
  window.document && window.document.createElement)
);

我这样在我的应用程序中使用

var ExecutionEnvironment = require('react/node_modules/fbjs/lib/ExecutionEnvironment');
...
render() {
  <div>{ ExecutionEnvironment.canUseDOM ? this.renderMyComponent() : null }</div>
}

编辑
这是一个未记录的功能,不应直接使用。它的位置可能会因版本而异。我通过显示Facebook团队在内部使用的内容来分享这种说法,以表达“这是您能做到的最好”。您可能需要将此代码(很小的)复制到您自己的项目中,因此您不必担心跟上版本之间的位置或潜在的重大更改。

*另一个 *编辑
有人为此代码创建了一个npm软件包。我建议使用它。

npm install exenv --save
2020-07-22