首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React:如何获得元素的高度,这些元素消失并以新的大小出现

在React中,要获得元素的高度并在元素消失后以新的大小出现,可以使用ref来引用元素,并结合生命周期方法和状态来实现。

首先,在组件的构造函数中创建一个ref对象,用于引用要获取高度的元素。例如:

代码语言:txt
复制
constructor(props) {
  super(props);
  this.elementRef = React.createRef();
}

然后,在组件的render方法中,将ref对象绑定到要获取高度的元素上。例如:

代码语言:txt
复制
render() {
  return (
    <div ref={this.elementRef}>
      {/* 元素内容 */}
    </div>
  );
}

接下来,可以在组件的生命周期方法中获取元素的高度。在componentDidMount方法中,元素已经被渲染到DOM中,可以通过ref对象获取元素的高度。例如:

代码语言:txt
复制
componentDidMount() {
  const element = this.elementRef.current;
  const height = element.offsetHeight;
  // 处理获取到的高度
}

如果需要在元素消失后以新的大小出现,可以使用状态来控制元素的显示与隐藏。例如,在组件的状态中添加一个布尔值的属性,用于控制元素的显示与隐藏。初始状态下,该属性为false,表示元素隐藏。当需要显示元素时,将该属性设置为true。例如:

代码语言:txt
复制
constructor(props) {
  super(props);
  this.state = {
    showElement: false
  };
}

然后,在render方法中根据状态来决定是否显示元素。例如:

代码语言:txt
复制
render() {
  return (
    <div>
      {this.state.showElement && (
        <div ref={this.elementRef}>
          {/* 元素内容 */}
        </div>
      )}
      {/* 其他内容 */}
    </div>
  );
}

最后,在需要显示元素的时机,通过修改状态来控制元素的显示与隐藏。例如,在某个事件处理函数中,将showElement属性设置为true,即可显示元素。例如:

代码语言:txt
复制
handleShowElement() {
  this.setState({ showElement: true });
}

综上所述,通过使用ref引用元素、生命周期方法获取元素高度、状态控制元素的显示与隐藏,可以实现在React中获得元素的高度,并在元素消失后以新的大小出现。

对于React相关的腾讯云产品和产品介绍链接地址,可以参考腾讯云官方文档或咨询腾讯云客服获取更详细的信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

2022前端都考察些什么

,都支持服务器渲染SSR都有支持native方法,reactReact native, vue有wexx不同点:数据绑定:Vue实现了双向数据绑定,react数据流动是单向数据渲染:大规模数据渲染...void 并不改变表达式结果,只是让表达式不返回值。因此可以用 void 0 来获得 undefined。...两者区别如下:(1)在渲染树中display:none会让元素完全从渲染树中消失,渲染时不会占据任何空间;visibility:hidden不会让元素从渲染树中消失,渲染元素还会占据相应空间,只是内容不可见...,在一定情况下控制其中一个在另一个上方或者下方出现。...垃圾回收对于在JavaScript中字符串,对象,数组是没有固定大小,只有当对他们进行动态分配存储时,解释器就会分配内存来存储这些数据,当JavaScript解释器消耗完系统中所有可用内存时,就会造成系统崩溃

51730

Sentry 开发者贡献指南 - 前端(ReactJS生态)

组件与视图 app/components/ 和 app/views 文件夹都包含 React 组件。 使用通常不会在代码库其他部分重用 UI 视图。 使用设计为高度可重用 UI 组件。...最好样式是您不编写样式 - 尽可能使用现有组件。 代码应该使用 css-in-js 库 e m o t i o n - 它允许您将样式绑定到元素而无需全局选择器间接性。...以前我们使用了 lodash-webpack-plugin 和 babel-plugin-lodash 组合, 但是在尝试使用 lodash 实用程序(例如这个 PR)时很容易忽略这些插件和配置。...相反,与具有更大、更复杂 API 或更大大小库相比, 更喜欢具有更清晰、更简单 API 和更小大小库。...仅当期望元素在可能不会立即发生 DOM 更改后出现时才使用 await findBy...

6.9K30
  • 这是一篇很好互动式文章,Framer Motion 布局动画

    例如,改变一个元素宽度或高度就是一种布局变化,因为任何相邻元素都必须移动,以便为该元素尺寸腾出空间。...如果我们单独看一下这些变换,我们就可以知道这个正方形是如何结束: 我们算法首先将最终位置左上角与原始位置左上角对齐,然后将其缩小到初始尺寸。...缩放变换似乎是这里罪魁祸首--它从正方形中心开始缩放,导致正方形最终出现在错误位置。...现在让我们增加一个测试--如果我们元素有子元素会怎样? 如上图可以看到文字大小被改了。我们怎样才能解决这个问题呢? 导致该问题原因还 是inverse 比例变换。...试着移动下面的滑块,注意文字是如何保持相同大小,而不管广场大小如何。 现在,如何将其与我们布局动画相结合呢?

    2.7K20

    前端小知识点总结,助力你成功面试!

    ;visibility: hidden;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见 display: none;是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示...1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以应用margin/padding 3.在没有设置高度情况下会扩展高度以包含常规流中元素 4.处于常规流中时布局时在前后元素位置之间...5.shift() 从数组移出第一个元素,并返回该元素。 6.unshift() 在数组开头添加一个或多个元素,并返回数组长度。...15.filter(callback[, thisObject]) 返回一个包含所有在回调函数上返回为true元素数组。...一.支付宝面试题 1.深浅拷贝 2.react 3.react-native 4.vue 5.原生js 6.github 7.基本数据类型: null undefined object string

    1K20

    react-grid-layout 之核心代码分析与实践

    介绍 React Grid Layout 是一个用于构建可拖拽、可调整大小和自适应网格布局 React 组件库。...const child = React.Children.only(this.props.children); // 通过克隆现有的元素创建为元素,并修改它 className 和样式。...获取最近祖先元素中含有定位属性元素 获取以上两种元素定位信息 首先如何获取当前拖拽元素?...具体计算步骤如下: 计算底部边界 bottomBoundary:偏移父元素可见高度减去元素高度、上下边距之和 计算右侧边界 rightBoundary:容器宽度减去元素宽度、左右边距之和 通过...在实际使用拖拽功能时,会有当前拖动元素阴影站位,如下图11号元素如何实现拖拽过程中阴影?

    1.9K20

    为了秋招,我开发了一款页面元素高亮插件

    为了秋招,我开发了这个页面元素高亮插件 1 前言 大家好,我是心锁,一枚23届准毕业生。 随着七八月到来,大小厂们都开始了秋招提前批,在这个背景下,写出一份优秀简历无疑是面试邀请敲门砖。...所以撒,基于这个想法,我在visiky大佬开源基于React+Tshttps://github.com/visiky/resume简历生成器基础上开发了一款简历高亮(页面元素高亮)插件。...,这里要求我们知道这些变量含义: scrollHeight: windowHeight 页面(容器)高度,注意不是可视高度,是页面总高度 scrollWidth: windowWidth 页面(容器)...注意对于size和scroll这两种事件还是加个节流 3.2 替换页面元素 这里方案是通过window.getSelection()来获得选区,如图是一个Selection对象,具体方法可以搜索一下...」三个主要信息,这些信息作用是在选区替换时帮助定位被替换HTML文本。

    1.1K30

    谈谈前端面试经常遇到一些题目

    如何解决?问题描述: 两个块级元素上外边距和下外边距可能会合并(折叠)为一个外边距,其大小会取其中外边距值大那个,这种行为就是外边距折叠。...两者区别如下:(1)在渲染树中display:none会让元素完全从渲染树中消失,渲染时不会占据任何空间;visibility:hidden不会让元素从渲染树中消失,渲染元素还会占据相应空间,只是内容不可见...它是已有元素上添加类别的,不会产生元素。...如何提取高度嵌套对象里指定属性?...垃圾回收对于在JavaScript中字符串,对象,数组是没有固定大小,只有当对他们进行动态分配存储时,解释器就会分配内存来存储这些数据,当JavaScript解释器消耗完系统中所有可用内存时,就会造成系统崩溃

    69230

    【译】理解 Virtual DOM

    为什么需要 Virtual dom 为了理解 Virtual DOM 概念出现原因,让我们重新审视 DOM。...更进一步,由于 API 设置方式,在更新文档时,比起查找和更新特定元素所带来昂贵性能消耗,一次更新较大范围通常会更简单。 回到我们列表例子,我们使用元素整个替换会更合适。...但是,随着网页大小增加,这些性能差异可能会非常明显。 .....但 Virtual DOM是! Virtual DOM 诞生是为了解决需要以更高效方式频繁更新DOM这些问题。...完成对 Virtual DOM 所有更新后,我们可以查看需要对 DOM 进行哪些特定更改,并以优化后目标方式进行更改。 Virtul DOM 长什么样?...,它是如何解决 DOM 性能和可用性问题呢?

    1K20

    前端学习资料整理

    ,当状态变更,自动重新渲染整个组件  基于这种方式一个直观感受就是我们不再需要不厌其烦地来回查找某个 DOM 元素,然后操作 DOM 去更改 UI React 大体包含下面这些概念...JSX 是可选 可以直接用 React 提供这些 DOM 构建方法来写模板 在 JSX 里使用注释也很简单,就是沿用 JavaScript,唯一要注意是在一个组件元素位置使用注释要...[ Chrome:Blink(WebKit分支)] 详细文章:浏览器内核解析和对比 html5有哪些特性、移除了那些元素如何处理HTML5标签浏览器兼容问题?...当解释器寻找引用值时,会首先检索其 在栈中地址,取得地址后从堆中获得实体 Javascript如何实现继承?...等请求完,页面不刷新,内容也会出现,用户看到内容。 (待完善) 如何解决跨域问题?

    3.5K20

    React----组件生命周期知识点整理

    总结 重要勾子 即将废弃勾子 ---- 案例引入 需求:定义组件实现以下功能: 让指定文本做显示 / 隐藏渐变动画 从完全可见,到彻底消失,耗时2S 点击“不活了”按钮从界面中卸载组件...} //确保滑到某个位置,当前数据不会被挤下去 //更新后数据 componentDidUpdate(prevProps, prevState, height) { //height获得是...document.getElementById('show')) scrollTop和scrollHeight scrollTop: 代表在有滚动条时,滚动条向下滚动距离也就是元素顶部被遮住部分高度...scrollHeight: 因为子元素比父元素高,父元素不想被子元素一样高就显示出了滚动条,在滚动过程中本元素有部分被隐藏了,scrollHeight代表包括当前不可见部分元素高度。...而可见部分高度其实就是clientHeight,也就是scrollHeight>=clientHeight恒成立。

    1.5K40

    React 作为 UI 运行时来使用

    React 应用中,通常你不会调用这些 API ,因为那是 React 工作。 渲染器 渲染器告诉 React 如何与特定宿主环境通信,以及如何管理它宿主实例。...React 元素具有不可变性。例如你不能改变 React 元素元素或者属性。如果你想要在稍后渲染一些不同东西,需要从头创建 React 元素树来描述它。...相反,我们希望 React 这样做: ? 换句话说,React 需要决定何时更新一个已有的宿主实例来匹配 React 元素,何时该重新创建宿主实例。 这就引出了一个识别问题。...这与 React 如何思考并解决这类问题已经很接近了。 如果相同元素类型在同一个地方先后出现两次,React 会重用已有的宿主实例。...这大致就是每个 useState() 如何获得正确状态方式。就像我们之前所知道,“匹配”对 React 来说并不是什么知识 — 这与协调依赖于在渲染前后元素是否匹配是同样道理。

    2.5K40

    React教程:组件,Hooks和性能

    每当开发一个程序时,你需要为其做好在以后转换为 React 应用新设计,首先试着确定设计草图中组件,如何分离它们以使其更易于管理,以及哪些元素是重复(或他们行为)。...它们本质上是带来了体验,例如: 允许删除许多 class 组件,这些组件我们仅仅是使用而不归我们拥有,例如本地状态或 ref,所以组件代码看上去更容易阅读。...由于数组解构分配,我们可以立即将变量分配给这些元素。第一个是更新后最后一个状态,而另一个是我们将用于更新值函数。看起来相当容易,不是吗?...显然,对网络进行基本优化是最佳,例如对一些事件进行去抖动(例如,滚动),对动画保持谨慎(使用变换而不是通过改变高度并实现动画)等等。这些问题很容易被忽略,特别是如果你刚刚掌握了 React。...当然,即使这些看似微小变化也可能导致诸如影响浏览器兼容性等问题。就个人而言,我也想知道当 WebComponent 获得更多人气时会发生什么,因为它可能会增加一些 React 经常用到东西。

    2.6K30

    如何React 中点击显示或隐藏另一个组件?

    使用 React 状态管理控制组件可见性React状态是指组件私有的数据,它决定了组件在呈现时外观和行为。当状态更改时,组件会重新呈现,以反映这些变化。...useState 钩子返回一个数组,其中第一个元素是当前状态值,第二个元素是更新该状态函数。下面是一个示例,展示如何使用 useState 钩子创建一个用于控制组件可见性状态。...当用户单击菜单按钮时,菜单应该出现,然后当用户单击菜单外部时,菜单应该消失。下面是一个示例,展示如何使用 React 和事件处理函数来实现菜单显示和隐藏。...显示/隐藏模态框我们可以使用事件处理函数来触发模态对话框显示或隐藏。当用户单击打开模态框按钮时,模态框应该出现;当用户单击关闭按钮或模态框之外时,模态框应该消失。...我们还给出了两个示例:如何显示/隐藏菜单和如何显示/隐藏模态框。这些示例可以用作参考,帮助你在自己 React 应用程序中实现点击显示或隐藏另一个组件功能。

    4.9K10

    前端开发面试题

    视差滚动效果,如何给每页做不同动画?(回到顶部,向下滑动要再次出现,和只出现一次分别怎么做?) ::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素作用。...有一个高度自适应div,里面有两个div,一个高度100px,希望另一个填满剩下高度。 png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过webp?...等请求完,页面不刷新,内容也会出现,用户看到内容。 (待完善) 如何解决跨域问题?...reconciliation最终目标就是, 尽可能以最高效方法,去基于state来更新UI。为了达到这个目的,React会构建一个React元素树(你可以把这个想象成一个表示UI一个对象)。...Keys负责帮助React跟踪列表中哪些元素被改变/添加/移除。React利用子元素key在比较两棵树时候,快速得知一个元素还是刚刚被移除。

    5.1K52

    实战:使用 React 实现渐进式加载图片

    这通过提供图像随时出现感知来改善用户体验。 下面的GIF演示了如何使用本地元素来渲染图像。 正如我们所看到,尽管页面已经加载,但图像在呈现之前需要多花一秒钟时间,从而导致空白。...在本文中,我们将学习如何改进用户体验,并通过在React中从无到有地加载图像来防止布局变化。我们还将学习如何使用外部库来实现相同结果。...此外,这些框架使用高级图像处理选项,并允许延迟加载屏幕下方图像。 在我们例子中,焦点是使用React实现渐进图像加载。让我们开始实现它。...然后,我们将这些props分配给元素属性。 注意我们是如何使用…扩展操作符来注入组件接收到任何其他props。例如,我们将在稍后看到,组件将接收所需图像宽度和高度。...我们还必须沿着图像宽度和高度传递,以防止布局偏移。 如果图像大小大于指定值,请确保保持长宽比。

    3.7K30

    亲手打造属于你 React Hooks

    在这个循序渐进指南中,我将通过分解我为自己应用程序创建三个钩子,以及创建这些钩子是为了解决什么问题,向您展示如何创建自己自定义React钩子。...== "undefined") { return { width: 1200, height: 800 }; } } 如何从窗口得到宽度和高度 假设我们在客户端并且可以获得窗口,我们可以使用...useDeviceDetect Hook 我正在构建一个登录页面时,我在移动设备上经历了一个非常奇怪错误。在台式电脑上,这些样式看起来很棒。...如何从window获得用户代理 我们可以确定是否可以获得关于用户设备信息方法是通过userAgent属性(位于windownavigator属性上)。...我希望能让您更好地了解何时以及如何创建自己React钩子。您可以在自己项目中随意使用这些钩子和上面的代码,并以此为灵感创建自己自定义React钩子。

    10.1K60

    2019最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)

    第三步,使用xmlhttprequest对象responseText或responseXML属性获得服务器响应。...(多次出现在面试题) 1.父级div定义 height 原理:父级div手动定义height,就解决了父级div无法自动获取到高度问题。...· 是CSS2.1中规定宽度高度显示行为 · 在CSS中定义宽度和高度就对应到元素内容框 · 在CSS中定义宽度和高度之外绘制元素内边距和边框 border-box · 在CSS中微元素设定宽度和高度就决定了元素边框盒...,最后将该div等块级元素分别左移和上移,左移和上移大小就是该div等块级元素宽度和高度一半。...1.display:none是彻底消失,不在文档流中占位,浏览器也不会解析该元素;visibility:hidden是视觉上消失了,可以理解为透明度为0效果,在文档流中占位,浏览器会解析该元素; 2.

    1.9K20

    那些超好用浏览器扩展

    它可以非常轻松地查看网站上行高、字体或按钮大小,可以检查网络上对象、颜色和资产隐藏 CSS 样式。 react tools 如果你在你项目中使用 ReactJS,这是一个重要且必须使用扩展。...它允许您在浏览器中调试 React 代码,还可以访问代码上所有 React 组件。 几乎所有 React 开发人员都使用此扩展,它拥有超过 300 万用户。...标签页,既能让你平静下来,又能激励你提高工作效率。它可以帮助您通过每日照片和报价获得动力,设置每日重点并跟踪您待办事项。...它允许您使用简单标尺轻松测量以像素为单位页面元素。 当您在页面上移动鼠标时,它将绘制一个矩形标尺。标尺宽度、高度、起点和终点都标有匹配指标单位。...结论 因为这些扩展出现,浏览器已经不仅仅只是一个网页浏览工具,它更是一个提升开发效率工具,有了这些工具,我们工作效率变得非常高效,生活也变得更加轻松。

    1K40

    mini react-window(二) 实现可知变化高度虚拟列表

    但是也有一些场景是例如有图片,我们高度是一种,没有是另一种,这种情况也适合一些常见场景即高度可控,本小节我们看下不同子项高度情况下容器高度和每个元素 size 和 offset 如何计算得到。...思路分析对于容器总高度来说,因为每个字元素高度不定,而每次也只是渲染可视区内几个元素,所以不能直接写死,我们开始可以先预估一个总高度,最少元素是可以滚动起来,但我们得到真实元素高度后,我们可以动态计算容器总高度...,即容器总高度 = 测量过真是的高度 + 预估高度;对于单个元素来说,因为我们会传入每个元素计算方法,所以当元素出现在可视区域内时,我们算出当前元素 size 和 offset,同时需要把计算过元素存储起来...图片react-window 库实现效果// src/variable-size-list.js// 固定高度列表import { VariableSizeList } from "react-window...,我们先预估一个整体滚动高度,然后根据实际计算元素高度和再去重新计算:// 计算或者预估内容总高度 撑起来,出现滚动条const getEstimatedTotalSize = ({ itemCount

    1.7K40
    领券