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

Question

我正在构建一个同构应用程序，但我正在使用仅在客户端上呈现的第三方组件。所以，特别是对于这个组件，我只需要在客户端渲染时渲染它。

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

Answer 1

在内部，React 为此使用了一个名为 ExecutionEnvironment 的实用程序。它实现了一些有用的属性，例如 canUseDOM 和 canUseEventListeners。解决方案基本上就是建议的 here不过。

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>
}

EDIT 这是一个不应该直接使用的未记录功能。它的位置可能会因版本而异。我通过展示 Facebook 团队内部使用的东西来分享这一点，以此表达“这是你能做的最好的”。您可能希望将此代码(它很小)复制到您自己的项目中，因此您不必担心在版本之间跟踪其位置或潜在的重大更改。

另一个编辑有人创建了 npm package对于这个代码。我建议使用它。

npm install exenv --save