我正在构建一个同构的应用程序,但我使用的是只在客户端呈现的第三方组件.所以,特别是对于这个组件,我只需要在客户端渲染时渲染它.
如何检测我是在客户端还是在服务器上?我在找isClient()
或isServer()
之类的.
我正在构建一个同构的应用程序,但我使用的是只在客户端呈现的第三方组件.所以,特别是对于这个组件,我只需要在客户端渲染时渲染它.
如何检测我是在客户端还是在服务器上?我在找isClient()
或isServer()
之类的.
在内部,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团队内部使用的内容来分享这句话,以此表达"这是你能做的最好的事情".你可能想把这段代码(它很小)复制到你自己的项目中,这样你就不必担心它在不同版本之间的位置或潜在的 destruct 性更改.
ANOTHER EDIT有人为此代码创建了一个npm package.我建议用这个.
npm install exenv --save