在React中，如何检测我的组件是从客户端还是服务器呈现？
我构build了一个同构的应用程序，但是我使用的是只在客户端呈现的第三方组件。 所以，特别是对于这个组件，我只需要在客户端渲染的时候渲染它。
如何检测我是否在客户端或服务器上？ 我正在寻找像isClient()或isServer() 。
在内部，React使用一个名为ExecutionEnvironment的工具。 它实现了一些有用的属性，如canUseDOM和canUseEventListeners 。 解决scheme基本上就是这里所说的。
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> }
编辑这是一个不应该直接使用的未公开的function。 它的位置可能会从版本更改。 我通过展示Facebook团队内部使用的内容来分享这一点，以此expression“这是你能做的最好的事情”。 您可能希望将此代码（很小）复制到您自己的项目中，因此您不必担心从版本到版本的位置或潜在的重大更改。
另一个编辑有人为此代码创build了一个npm包 。 我build议使用这个。
npm install exenv --save
有两件事可能是相关的：
许多项目在设置全局SERVER或CLIENT布尔值时使用了一些约定，因此所有代码都可以基于它进行切换。 在你的服务器包中，设置一些全局的， 就像这个项目一样
global.__SERVER__ = true;
在你的客户端软件包中，设置一些全局客户端为真，你可以用Webpack的DefinePlugin来实现
new webpack.DefinePlugin({ __CLIENT__: true })
通过上述方法，您可以在willMount或render上基于该variables进行切换，以在服务器上执行一项操作，而在客户机上执行另一项操作。
在这里可能有用的第二件事是componentDidMount只能在客户端上运行，而不能在服务器上运行。