我正在构建一个同构的应用程序,但我使用的是只在客户端呈现的第三方组件.所以,特别是对于这个组件,我只需要在客户端渲染时渲染它.

如何检测我是在客户端还是在服务器上?我在找isClient()isServer()之类的.

推荐答案

在内部,React为此使用了一个名为ExecutionEnvironment的实用程序.它实现了一些有用的属性,比如canUseDOMcanUseEventListeners.不过,解决方案基本上就是建议的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

Reactjs相关问答推荐

每个都有重复元素的嵌套组件

如何从react 18-nextjs 14应用程序路由中的客户端组件呈现服务器组件?

Mantine DatePickerInput呈现错误

如何垂直对齐 React Bootstrap Table 行中的项目

警告:遇到两个子元素拥有同一把 keys .键应该是唯一的,以便组件在更新时保持其身份

MERN,将动态列表中的元素插入数组

React-dom 的钩子调用无效.我能做些什么?

try 从 React JS 构建此教程游戏但无法继续前进

如何让 useEffect 在 React.JS 中只运行一次?

如何使用样式化函数为 TextField 的输入组件设置样式

使用 react pro 侧边栏展开折叠菜单

React - 错误边界未捕获错误

AWS 全栈应用程序部署教程构建失败

React Final Form - 单选按钮在 FieldArray 中不起作用

setState 改变对象引用

模块解析失败:意外令牌 (257:106) 您可能需要适当的加载程序来处理此文件类型

如何从 extrareducer redux 更改对象中元素的值

无法重用我的组件,它只显示 1 次

useEffect 仅在跟随链接后有效,不适用于直接链接

React 似乎在触发另一个组件时重新渲染了错误的组件