在 React 中,可以始终调用 ReactDOM. Hydro 而不是 ReactDOM.render 吗?

2024-01-27

我在调用时有如下代码ReactDOM.hydrate。这是共享代码,有时从节点服务器调用,有时在客户端浏览器中调用。我需要做任何不同的事情吗(然后打电话hydrate) 仅在客户端调用时。通常情况下,我会打电话render.

const render = Component => {
 ReactDOM.hydrate(
    <Router history={browserHistory}>
        <FullPage />
    </Router>,
    document.getElementById('root')
 )
}

渲染(应用程序);


hydrate做类似的工作render在客户端,HTML 是否具有服务器呈现的标记,但是如果之前没有标记(例如不是 SSR),那么hydrate会产生一些警告,但是它会按预期呈现您的标记。 解决这个问题的一个更好的方法是检查它的 SSR(假设root作为您的父级 div id):

var isMarkupPresent = document.getElementById('root').hasChildNodes();

然后你可以render or hydrate:

isMarkupPresent ? hydrate(...) ? render(...)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 React 中,可以始终调用 ReactDOM. Hydro 而不是 ReactDOM.render 吗? 的相关文章

  • React.js:可以在函数组件之外分配 useState() 吗?

    是否有任何语法允许分配useState在功能组件之外 到目前为止我已经尝试过 但没有成功 import React useState useEffect from react import ReactDOM from react dom f
  • 如何使用 React 获取查询字符串?

    我试图从网址获取 query 123 http localhost 3000 query 123 http localhost 3000 query 123 Tried App js const search this props loca
  • 样式化组件:如何针对直系儿童?

    我在文档中看到 选择器用于嵌套定位 但以下不起作用 这里使用的正确语法是什么 const InlineContainer styled div display flex gt margin right 40px 作为 CSS 值 字符串 4
  • 在 Chrome 中使用 React 添加新的 DOM 项目不会保持预期的滚动位置

    在 React 中向状态数组添加新项目时 我遇到了一个意外的问题 这会导致更多项目被添加到 DOM 中 在 Safari 和 Firefox 中 这会导致新的 DOM 项目添加到折叠下方 我必须向下滚动才能看到新项目 在 Chrome 中
  • Redux 减速器的副作用

    Redux 减速器应该没有副作用 但是 如果某个操作应该触发浏览器中文件的下载 其中内容基于商店的状态 该怎么办 这当然应该算作副作用吗 像下面这样的方法可以吗 还是我应该寻找替代方法 case SAVE GRID const json s
  • Jest - 模拟函数,从另一个文件导入

    测试的文件使用从另一个文件导入的函数 import myFunc from myFile 如何在该文件的测试中模拟该函数的返回值 我正在使用笑话 这对我有用 我不确定这是否是一个好的做法 import as myFile from myFi
  • 从输入类型编号获取无效值

    我正在使用输入类型数字 当它无效时 我如何从中获取值 例如 使用类型编号并仅打印 e 这本身是无效的 我正在使用 React 但我认为这个问题非常普遍 onChange event console log event target valu
  • 如何在 Gatsby 页面上包含本地 JavaScript?

    我是一个完全的 React 新手 我想这里有些基本的东西我不太明白 默认的 Gatsby 页面如下所示 有没有办法像这样使用本地 js 文件 我想要实现的是让反应忽略script js但仍然让客户端使用它 默认的 Gatsby 页面看起来像
  • 即使未显式使用“componentWillMount”,“componentWillMount”警告仍可见

    在我的代码中 我没有任何明确的用途componentWillMount 但我在运行时仍然看到一些警告webpack react dom development js 12386 警告 componentWillMount 已重命名 不建议使
  • axios 请求中未发送正文数据

    我试图通过 axios 请求将数据发送到我的后端脚本 但正文看起来是空的 这是前端发送的请求 axios request method GET url http localhost 4444 next api headers Authori
  • 将两个 JSON 数据合并为具有特定键值的一个

    我有两个 CSV 文件 球数据 json id 1 color red id 2 color blue 法庭 json court id 2001 ball in use 1 court id 2005 ball in use 2 如何根据
  • React JS 服务器端问题 - 找不到窗口

    你好 我正在尝试在我的reactJS项目中使用react rte 我有服务器端渲染 每次我想使用这个包时 我都会得到 return msie 6 9 b test window navigator userAgent toLowerCase
  • 将 Firebase FCM 添加到 ReactJS 应用程序

    我正在尝试向我的 ReactJS 应用程序中的用户发送推送通知 我已添加 firebase 请求用户通知权限 这正在发挥作用 但现在我想注册设备令牌 但这给了我错误 消息传递 我们无法注册默认的 Service Worker 无法注册 Se
  • 如何在reactjs中禁用未来日期?

    我没有使用任何日期选择器 代码仍然工作正常 到目前为止 我已经选择了输入类型 一切正常 现在我想禁用未来的日期 我怎么做 div div
  • 没有 Props 的 TypeScript React State

    我想利用 TypeScript 中的静态和强类型 但仅限于状态 因为我不打算采用任何道具 当我尝试传递接口时 最终出现错误 import as React from react import Link from react router d
  • 使用 Reactjs 获取滚动位置

    我使用reactjs并想要处理滚动click event 首先 我呈现了帖子列表componentDidMount 其次 通过click event在列表中的每个帖子上 它将显示帖子详细信息并滚动到顶部 因为我将帖子详细信息放在页面的顶部位
  • 使用代理时,React 应用程序正在不同位置查找静态文件

    我用过npx create react app my app创建一个反应应用程序 我用过的npm run build构建应用程序并使用它进行部署serve s build 我正在使用代理服务器来公开我的应用程序 我的 httpd 配置如下所
  • React 在同一组件中渲染多个模态

    我对 React 和一般编码都很陌生 我试图在同一组件中渲染多个模态 但它们都是同时渲染的 因此看起来所有链接都在最后一个模态中渲染文本 这是状态设置的地方 class Header extends React Component cons
  • 在react-admin中通过REST API进行基于cookie的身份验证

    我是反应管理新手 我已经阅读了 stackoverflow 中的所有问题 也用谷歌搜索了我的问题 但没有找到任何有用的解决方案 我正在设置 React admin 来替换我的一个项目的现有管理页面 我通过 REST API 使用基于 coo
  • ReactJs 警告:不推荐使用改变“style”。考虑事先克隆它

    我收到以下警告 inWarning div was passed a style object that has previously been mutated Mutating style is deprecated Consider c

随机推荐

  • HttpRequest.Content.IsMimeMultipartContent() 在应该返回 true 时返回 false

    我需要将 HTTP 请求作为 MultiPartFormData 发送到 REST 控制器 它正在工作 但现在我在控制器上进行的检查声称请求的类型不正确 即使我可以在调试器中看到请求的类型正确 以供参考 这是调用它的控制台应用程序代码 us
  • Play Framework 2.2.x 多个路由文件

    我已经读完这部剧了 对于 Scala 书中关于模块的部分 我似乎无法弄清楚如何从引用的模块导入路由 我已将模块设置为 build sbt 文件中的库依赖项 并尝试将路由导入到路由文件中 如下所示 构建 sbt libraryDependen
  • 如何使用 Emacs 更改文件的读/写模式?

    如果文件设置为只读模式 如何在 Emacs 中将其更改为写入模式 反之亦然 M x 只读模式 在非常旧的 Emacs 版本中 命令是 M x 切换只读 在我的 Windows 机器上 这相当于 Alt x 调出元提示符并输入 只读模式 来调
  • 检查一个列表是否以另一个列表的元素开头

    如果列表的开头恰好是另一个列表的元素 那么最简单 最Pythonic的方法 是什么 考虑以下示例 li 1 4 5 3 2 8 Should return true startsWithSublist li 1 4 5 Should ret
  • 如何在我的网站中实施 HSTS

    我有一个网站 来自 godaddy 的域名并托管在 hostgator 中 当我手动更新证书时 我可以将我的网站重定向到 https 但它总是从 google 搜索转到 http 在网上搜索后 我了解到考虑到Strict Transport
  • Java ant 脚本不显示警告

    我有一个 1 4 java 代码 我想用 1 5 编译器编译它 因为我想看到所有警告消息 我向 javac 添加了 Xlint 选项 但输出似乎没有变化 但我知道代码中至少有几个警告 我将这两行添加到我的 ant 脚本的编译目标标记中
  • memcached数据缓存的设计模式

    可以轻松地将可选的 memcached 缓存封装到现有的数据库查询中 例如 旧 仅限数据库 function getX x get from db return x end 新 带有内存缓存的数据库 function getX x get
  • 了解 C# 中运行时代码生成的各种选项(Roslyn、CodeDom、Linq 表达式,...?)

    我正在开发一个应用程序 我想在其中动态生成数值计算的代码 为了性能 作为数据驱动操作来执行此计算太慢 为了描述我的要求 请考虑此类 class Simulation Dictionary
  • 有没有办法让vim打开一个目录及其所有子目录中的所有.C和.H文件?

    我想在 vim 中对大约 20 个 C 和 H 文件执行替换 并且我想一次打开它们 所有文件分布在多个嵌套目录中 命令在最顶层父目录中执行 我可以只使用 vim 来完成此操作 还是需要 find 命令和 p 选项 如图所示 关于这个答案 h
  • 如何在浏览器关闭时关闭 vaadin 会话但保留 http 会话?

    我正在开发一个 vaadin 7 应用程序 使用 jaas 进行用户身份验证和授权 并在应用程序服务器 glassfish 中定义领域 我有这样的要求 用户可以保持登录状态一段时间 这样他就不需要每次都输入密码 我通过设置 http 会话的
  • Github 限制访问

    我正在使用github 我正在尝试找出如何限制我拥有的承包商的回购访问权限 我有主要的 Rails 代码库 还有一个承包商将为我做一些 css ux 类型的工作 我想让承包商能够仅将代码签入 github 的某些文件夹 理想情况下 我可以让
  • 有没有更好的方法来获取 PHP 的货币汇率?

    使用以下代码的货币汇率有时有效 有时无效 而且一点也不可靠 有没有更好的方法来获取 PHP 的货币汇率 public function getJPYtoUSDExchangeRate from JPY to USD amount 1 dat
  • 如何使用 setuptools 排除或忽略软件包预发布?

    我正在使用 setuptoolstensorflow包依赖 我跑步时注意到setup py install 它发现tensorflow 1 13 0rc2 当我跑步时pip 它发现tensorflow 1 12 然后我发现这张票 https
  • 设置新创建的 CAShapeLayer 的正确框架

    简而言之 苹果没有设置frame or bounds for a CAShapeLayer自动 并且苹果尚未实现等效的 UIView sizeThatFits 如果您使用路径边界框的大小设置框架 一切都会出错 无论你如何尝试设置它 它都会搞
  • 使用静态 WebDriver 实例的 java.lang.NullPointerException

    我想将我的代码分成更小的函数 但有一个问题 因为驱动程序并非适用于所有功能 所以我将它声明为常量 或者有更好的方法吗 但在第三个函数中 它在线失败 Select dropdown finance product new Select dri
  • 在多个文件中进行测试

    我正在为大型项目使用金字塔框架 我发现将所有测试放在一个中很混乱tests py文件 所以我决定创建包含我的测试文件的目录 问题是 我不知道如何告诉金字塔从这个目录运行我的测试 我正在使用运行测试python setup py test q
  • 无法从 C 应用程序访问 C++ DLL 中的变量

    我一直在修复旧版 Visual C 6 应用程序 在我放入的 C DLL 源中 extern C declspec dllexport char MyNewVariable 0 这会导致 MyNewVariable 显示在导出表中 未修饰
  • 如何在int内添加空格?

    假设我想打印数字 100000000 乍一看很难判断这个数字代表了多少百万 是一千万还是一亿 如何使 Java 中的大数字看起来更具可读性 例如这样的事情会很棒 100 000 000 你一眼就能看出这个数字是一亿 您也可以尝试 Decim
  • 如何从城市名称android代码获取经度,纬度

    我想转换从包含城市名称的文本字段中获取的文本 并且我想将其转换为经度和纬度 这就是我做的 String location city getText toString String inputLine String result locati
  • 在 React 中,可以始终调用 ReactDOM. Hydro 而不是 ReactDOM.render 吗?

    我在调用时有如下代码ReactDOM hydrate 这是共享代码 有时从节点服务器调用 有时在客户端浏览器中调用 我需要做任何不同的事情吗 然后打电话hydrate 仅在客户端调用时 通常情况下 我会打电话render const ren