我正在构建同构应用程序,但是我使用的是仅在客户端上呈现的第三方组件。因此,特别是对于此组件,我只需要在客户端中渲染时才渲染它。
如何检测我是在客户端还是在服务器?我正在寻找类似isClient()
或的东西isServer()
。
在内部,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
只是好奇,为什么!一开始?
!!
将值强制转换为布尔值,以确保true
或false
返回而不是潜在返回undefined
。您可以将!!
上面替换为Boolean
并获得相同的结果由于这里使用的是
&&
运算符,因此看不到最终会返回未定义的路径或true或false以外的其他值的路径。我错了吗?如果
window.document
存在,但没有createElement
方法,则将返回undefined
。如果它确实有一个createElement
方法,它将使该方法又返回一个函数。要对此进行测试,您可以将其复制并粘贴到您的javascript控制台中(不带!!
),并查看它返回一个函数