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

Question

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

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

Answer 1

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

实施 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