温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - In React, how do I detect if my component is rendering from the client or the server?
javascript node.js reactjs

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

发布于 2020-03-29 21:29:03

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

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

查看更多

提问者
André Pena
被浏览
14
4,796 2019-07-24 23:56

在内部,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