React监听页面尺寸，实时计算设置宽高

最新推荐文章于 2024-04-02 10:15:31 发布
最新推荐文章于 2024-04-02 10:15:31 发布
阅读量4.8k 收藏 3
点赞数 1
分类专栏： React 文章标签： js react css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44064730/article/details/112907826
版权
本文介绍了如何在React应用中利用componentDidMount和componentWillUnmount生命周期方法监听窗口尺寸变化，实时计算页面元素的高度。通过将计算后的高度更新到state，并绑定到元素样式，实现页面元素高度随视窗大小动态调整。示例代码展示了具体实现过程。
摘要由CSDN通过智能技术生成

React监听页面尺寸，实时计算设置宽高

  • 思路
  1. 通过componentDidMount/componentWillUnmount进行监听/解除监听当前视窗的宽高
  2. 将当前的宽高进行所需的计算后赋值给state中对应的变量
  3. 页面的style中直接绑定this.state对应的宽高
  • 举例
    我需要实时设置页面中某个<div></div>的高度为视窗高度减去104px
  1. 写一个方法：
setPageHeight = () => {
   
	this.setState({
   
    	pageHeight: document.body
最低0.47元/天 解锁文章
浦东余春娇
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
React根据宽度自适应高度的示例代码
01-21
有时对于响应式布局，我们需要根据组件的宽度自适应高度。CSS无法实现这种动态变化，传统是用jQuery实现。 而在React中无需依赖于JQuery,实现相对比较简单，只要在DidMount后更改width即可 Try on Codepen 需要注意的是在resize时候也要同步变更，需要注册个监听器 class Card extends React.Component { constructor(props) { super(props); this.state = { width: props.width || -1, height: props.heigh
浅谈React和Redux的连接react-redux
08-28
`connect` 的工作原理是监听 store 的变化，当状态改变时，重新计算并更新与 Redux 相连接的组件的 props。这样，组件可以根据新的 props 自动重渲染，而无需手动管理状态。 总结来说，`react-redux` 提供了一种...
react中监听页面滚动的高度以及横向滚动的位置
雷佳佳的博客
03-07 8614
//首先在componentDidMount，进行scroll事件的注册，绑定一个函数，让这个函数进行监听处理 componentDidMount() { window.addEventListener('scroll', this.bindHandleScroll) } bindHandleScroll=(e)=>{ // 滚动的高度(兼容多种浏览器) const scro...
使用React和ResizeObserver实现自适应ECharts图表
最新发布
m0_73117087的博客
04-02 3897
在现代 Web 开发中，响应式布局和数据可视化是非常常见的需求。本文将介绍如何使用React、ResizeObserver和ECharts库来创建一个自适应的图表组件。
react经验1:监听窗体尺寸变化
Comvir的专栏
08-24 2236
应用场景: 你的页面中有一个表格、搜索栏、分页控件时，需要根据页面尺寸计算表格的滚动高度，并且当窗体尺寸改变时重新计算一次。
自定义hooks实现监控页面高度
Realizee的博客
12-31 660
实现一个简单的功能，监听页面高度，把他维护未公共组件，其他想使用的组件都可调用。 1. 和写功能一样，写好这个功能的代码逻辑。 只要注意use开头，最后导出即可 import React, { useState, useEffect，useCallback } from 'react' // 自定义hooks，要以use开头 function useWinSize() { const [size, setSize] = useState({ heig...
[React]ResizeObserver使用：监听Dom元素尺寸改变
SCUhzs
06-09 1303
[React]ResizeObserver使用：监听Dom元素尺寸改变
浅谈react.js中实现tab吸顶效果的问题
10-19
这个问题的解决方案通常涉及到对滚动事件的监听、DOM元素的位置计算以及使用React的状态管理。 首先，我们要明确实现吸顶效果的基本思路。当页面滚动到Tab所在位置时，如果滚动的距离（scrollTop）超过了Tab元素...
购物车H5前端页面，带前计算端逻辑
07-25
在构建一个具有前端计算逻辑的H5购物车页面时，我们需要关注多个关键点，这些知识点涵盖了前端开发的多个方面。以下是对这些要点的详细说明： 1. **HTML 结构**： - 页面需要包含各种元素，如商品列表、选择框...
初学web--登录页面
08-09
还可以使用`box-sizing`属性调整元素的尺寸计算方式，`padding`和`margin`控制元素间的间距，以及`border`定义边框样式。 在实战练习中，"test-login"可能是一个包含HTML和CSS文件的目录。HTML文件（如"index.html"...
页面控制定时任务源码
03-15
前端页面控制通常是指在浏览器端通过JavaScript或者其他前端框架（如React、Vue、Angular等）实现的功能。JavaScript是页面交互的基础，它可以监听用户操作，也可以通过定时器（setTimeout或setInterval）实现定时...
react 自动设置高度
weixin_42327537的博客
12-14 474
react 数组分类根据数组长度自动设置高度
react中函数式组件获取元素大小宽度的用法
qq_42939143的博客
08-11 3421
react函数组件通过不同方式获取元素的大小方式
ResizeObserver Polyfill监听元素宽高的变化，在React中的应用
weixin_44471622的博客
07-31 5252
当需要对窗口大小变化做监听时，可以使用onresize函数。Resize Observer API 提供了一种高性能方法可以监视元素的大小更改。 原理： 使用 ResizeObserver()构造函数创建一个新对象，然后使用 ResizeObserver.observe()来监听dom对象，每dom对象的大小发生改变时，构造函数中设置的回调函数便会运行。 resizeObserver.observe(): 监听一个dom元素 resizeObserver.unobserve(): 注销掉监听的dom元.
react中获取dom元素的高度(table铺满屏幕剩余高度)
天心天地生的博客
08-10 5351
react中获取dom元素的高度(table铺满屏幕剩余高度) 使用antd写了一个table,为了交互上友好;要求如下 1. 下图红色区域铺满屏幕剩余高度; 2. table高度不限,有纵向滚动条; 3. 页面不允许出现纵向滚动条;
React监听浏览器窗口大小的改变
w319502537的博客
04-13 7327
React监听浏览器窗口大小的改变
监听div元素高度变化的方案
weixin_42287935的博客
10-11 835
width: 0;</</
react页面渲染之前_如何在渲染之前获取React组件的大小（高度/宽度）？
weixin_34861702的博客
01-13 2664
小编典典如前所述，在将元素呈现为DOM之前，您无法获得任何元素的尺寸。在React中，您可以做的只是渲染一个容器元素，然后在中获取其大小componentDidMount，然后渲染其余内容。我做了一个有效的例子。请注意，使用setStatein componentDidMount是一种反模式，但在这种情况下可以使用，因为这正是我们要实现的目标。干杯!码：import React, { Compon...
Antd Table自适应页面剩余高度
GuanJdoJ的博客
02-16 7430
antd Table自动占满页面剩余高度
react-draggable-tags raggableArea组件如何设置拖拽范围
04-29
`react-draggable-tags` 的 `DraggableArea` 组件默认是可以在整个页面上拖拽的，如果需要设置拖拽范围，可以使用 `bounds` 属性来限制拖拽的区域。 `bounds` 属性需要传入一个对象，该对象包含以下属性： - `left`：限制拖拽区域的左边界 - `top`：限制拖拽区域的上边界 - `right`：限制拖拽区域的右边界 - `bottom`：限制拖拽区域的下边界 例如，如果要将 `DraggableArea` 组件的拖拽范围限制在某个容器内，可以在该容器上监听 `mousedown` 事件，在事件处理函数中计算出拖拽区域的边界，然后将边界传递给 `DraggableArea` 组件的 `bounds` 属性。 以下是一个示例代码： ```jsx import React, { useRef } from 'react'; import { DraggableArea } from 'react-draggable-tags'; function App() { const containerRef = useRef(null); // 监听容器的 mousedown 事件，计算出拖拽区域的边界 const handleMouseDown = (e) => { const containerRect = containerRef.current.getBoundingClientRect(); const bounds = { left: containerRect.left, top: containerRect.top, right: containerRect.right, bottom: containerRect.bottom, }; return bounds; }; return ( <div ref={containerRef}> <DraggableArea bounds={handleMouseDown}> {tags.map((tag) => ( <div key={tag.id}>{tag.text}</div> ))} </DraggableArea> </div> ); } ``` 在上面的代码中，`handleMouseDown` 函数会在容器上监听 `mousedown` 事件，然后计算出容器的边界并返回。然后将该函数传递给 `DraggableArea` 组件的 `bounds` 属性，这样就可以限制拖拽区域在容器内了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值