我正在构建同构应用程序,但是我正在使用仅在客户端上呈现的第三方组件。因此,特别是对于此组件,仅在客户端渲染时才需要渲染。
如何检测我是在客户端还是在服务器上?我正在寻找类似isClient()或的东西isServer()。
isClient()
isServer()
在内部,React使用一个ExecutionEnvironment为此调用的实用程序。它实现了一些有用的属性,例如canUseDOM和canUseEventListeners。该解决方案本质上只是此处所建议的。
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