getBoundingClientRect().width使用react挂钩返回0 - 腾讯云开发者社区

文章/答案/技术大牛

发布

你不知道的React Ref

怎样使用React Ref属性在我们平时使用React的时候，对于React中的Ref的属性，相信大家使用的频率是很低的。...简单来说，useRef Hook向我们返回一个可变对象，该对象在React组件的生命周期内保持不变。...利用这一特性，我们可以创建一个useEffect挂钩，该挂钩仅在每次组件更新时都运行其逻辑，而不在初始渲染时运行。...} = ref.current.getBoundingClientRect(); document.title = `Width:${width}`; console.log(...node) return; const { width } = node.getBoundingClientRect(); document.title = `Width:${width

2.8K5 0

逐步拆解React组件—Lazyload懒加载

const { top, left, width, height } = dom.getBoundingClientRect(); const { top: parentTop..., left: parentLeft, width: parentWidth, height: parentHeight } = parentDom.getBoundingClientRect...&& offsetLeft <= intersectionWidth && offsetLeft + width >= 0 ) } 完成了核心的函数后，这里我们开始把转化成...false debounce 可选，防抖时间，优先级高于节流 number 0 throttle 可选，节流时间，优先级低于防抖 number 0 源码解析 import React, { useState...children : loading } ) } 如何使用 npm install @lumu/lazyload –save import React from

2.1K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

图解浏览器的各种距离

因为这里要介绍一个 react 事件的坑点： react 事件是合成事件，所以它少了一些原生事件的属性，比如这里的 offsetY，也就是点击的位置距离触发事件的元素顶部的距离。...react-use 提供的 useMouse 的 hook 就解决了这个问题：它是用 e.pageY 减去 getBoundingClientRect().top 减去 window.pageYOffset...这里的 getBoundingClientRect 是返回元素距离可以可视区域的距离和宽高的：而 window.pageYOffset 也叫 window.scrollY，顾名思义就是窗口滚动的距离。...返回的数值是更精确的小数，所以算出来的也是小数。...：拿到 width、height、top、left 属性，其中 top、left 是元素距离可视区域的距离，width、height 绝大多数情况下等同 offsetHeight、offsetWidth

5921 0

Canvas 上实现坐标定位

-- 拖拽的元素 --> （0， 0）我们添加点样式润色下： html, body { width: 100%; height: 100%...; position: relative; } * { padding: 0; margin: 0; } #canvas { width: 100%; height: 100%;...= canvasDom.getBoundingClientRect(); let x = event.clientX - react.left; let y = event.clientY -...react.top; // 绘制十字架 ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(canvasDom.width, y); ctx.stroke...该方法返回一个 DOMRect 对象，其中包含以下属性： x: 元素左边界相对于视口左边界的距离 y: 元素上边界相对于视口上边界的距离 width: 元素的宽度 height: 元素的高度 top

8823 0

这是一篇很好的互动式文章，Framer Motion 布局动画

First 在 First 中，在任何布局变化发生之前，测量我们要做动画的元素的位置：获取元素位置的一种方法是使用HTML元素的.getBoundingClientRect()方法： const Motion...使用 React 实现的代码： App.js import React from 'react' import Motion from './Motion' import '....碰巧是提，我们用来测量正方形的.getBoundingClientRect()方法也刚好返回元素的 width 和 height: const { width, height } = squareRef.current.getBoundingClientRect...而是将比例动画到1(如果我们将比例动画到0，元素将完全消失)： animate({ from: deltaWidth, to: 1, // ... }); 使用 position 固定大小...换句话说，这个错误的发生是因为测量的距离和变换原点之间的差异：getBoundingClientRect()返回元素的左上角，而变换原点默认是在元素的中心。

3.5K2 0

useLayoutEffect的秘密

前言在React中针对DOM操作的最常见方法是使用refs来访问DOM节点，其实还有一种方法，就是使用useLayoutEffect来访问DOM节点，根据实际 DOM 测量（例如元素的大小或位置）来更改元素...().width; return result; } // 计算子元素的宽度，考虑了左侧位置和右侧间隙 const rect = node.getBoundingClientRect...) => { return width + moreWidth < containerWidth; }); // 返回可见子元素的最后一个的索引，如果没有可见的元素，则返回0 return...使用 useLayoutEffect它会影响性能！我们最不希望的是我们整个 React 应用程序变成一个巨大的同步任务。...使用ref直接对DOM进行修改。这样，React不会安排更新，也不需要急切地刷新effect。

2.6K1 0

你这磨人的小妖精——选中文本并标注的实现过程

页面，是一个详情页，页面的内容是多个接口返回填进去的：标题1 {接口1返回} 标题2 {接口2返回} ...}) => { // portal渲染的组件返回的react元素 return rect && createPortal( <aside style={style} id="lhyt-selection-portal...bottomright，中间就中间 Object.assign(aside.style, { left: `${left}px`, top: `${top}px`, width...原本设计是一个组件，实际上应该做成一个hook的，改起来也很简单，就不说了最后这个小功能使用只是一瞬间，但实现过程很复杂，涉及到的知识点比较多 react下使用原生js，避免直接和state、props...挂钩 react下使用原生js，react操作和原生js的dom操作严格分开，不可夹杂着一起使用标注

2.3K3 0

四个真秀React用法，你值得拥有

常规实现思路 const useLayoutResize = () => { const [size, setSize] = useState({ width: 0, height: 0...，在回调函数中返回新的节点。...当props.children的值为undefined或null的时候，会直接返回undefined/null，在前面我们实现Radio.Group便使用到了React.Children.mapReact.Children.forEach...(children)验证子元素是否只有一个子元素(React.ReactElement)并返回它。...注意：React.Children.only不接受React.Children.map的返回值，因为它是一个数组而不是一个React元素。5.

2.7K27 2

clientWidth，offsetWidth，scrollWidth你分的清吗

定位，直到找到body，并且即使元素会被滚动，这个值也不会改变 scrollWidth/scrollHeight scrollWidth/scrollHeight 返回值包含 content + padding...在没有滚动条时scrollTop==0。...getBoundingClientRect() 它返回一个对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离...笔者用react写的，直接附上代码吧 dom (this.scrollRef...; } 最后本文整理了clientWidth，offsetWidth，scrollWidth的概念，以及它们所衍生出来的offsetTop，scrollTop的使用，并加上了一个不算复杂的demo，希望能对你有用

3.1K1 0

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

本篇文章将带你了解如何使用 RGL（React Grid Layout），以及核心功能断点布局、网格布局、以及缩放、拖拽功能的代码实现。...使用下载 npm 包 npm install react-grid-layout 引入 RGL（react-grid-layout） import GridLayout from "react-grid-layout...= entries[0].contentRect.width this.setState({width}) } }) 现在我们知道了如何获取元素的宽度，当我们缩放视图窗口时...其中 getBreakpointFromWidth 方法根据当前屏幕宽度，返回设置的断点。getColsFromBreakpoint 方法根据断点，返回当前的布局。...undefined : "react-resizable-hide"} width={position.width} height={position.height}

4.3K3 0

前端弹幕实现

前端弹幕实现前言目前视频播放平台弹幕几乎都是使用js操作dom的方式实现，由于篇幅的原因这次只展示js操作dom的实现方案。下文代码展示使用的是react 16.2版本库。...容器宽高 state = { width: 0, height: 0 } barrageList = [] // 弹幕元素信息 rowArr = [] // 容器可以展示弹幕的行...}); } 创建弹幕dom 需要执行的任务有：随机获取空闲行随机一个行数，判断该行是否可以插入新的弹幕可以使用，就将该行行数返回不可以使用，就向后继续寻找可以使用的行找到了就返回对应的行数...没找到，找随机行前面是否有可用的行，有就返回对应行数，没有就返回undefined // 获取空闲行 getIdleRow = () => { if (this.rowArr.length ===...} = this.state; const containerRect = container.getBoundingClientRect(); const domRect = dom.getBoundingClientRect

3.4K4 1

懒加载 React 长页面 - 动态渲染组件

Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。...在没有引入 React.memo 之前，使用 PureComponent 可以达到对 props 浅比较的效果，另外，我们也可以采用 shouldComponentUpdate 来进行具体的比较，从而减少组件的渲染次数...具体如：shouldComponentUpdate(nextProps, nextState)而在函数组件中，我们可以使用 React.memo ，它的使用方法非常简单，如下所示。...若传入，则需要返回具体的比较结果 true, false 。...useMemo 根据依赖缓存的第一个参数的返回值，多用于组件内更细粒度的某一部分性能优化。

4.3K4 0

10.8 如何用js验证一下boz-sizing样式对块级盒子大小的影响？

document.querySelector("#medium").getClientRects()[0].width document.querySelector("#thick").getClientRects...()[0].width 使用getBoundingClientRect验证返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合，就是该元素的...2，如果box-sizing: border-box，元素的的尺寸等于 width/height。返回接口与上面的方法是一样的。...，但是输出的getBoundingClientRect().width相同。...参与研发的音视频直播产品曾在腾讯 QQ 上线，为数千万人使用。从 0 到 1 创建课件标准，被团队誉为课件之父，官方评定为 Adobe 中国 15 位社区管理员之一。

1.2K4 0

js判断元素在某个区域内是否可见（转）

该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；这里的top、left和css中的理解很相似，width、height是元素自身的宽高...所以你不用当心浏览器兼容问题，不过还是有区别的：IE只返回top,lef,right,bottom四个值，不过可以通过以下方法来获取width,height的值 var ro = object.getBoundingClientRect...getBoundingClientRect是获取可视区域相关位置信息的，使用这个属性来判断更加方便： function isElementInViewport (el) { var rect =...el.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 &&...() */ ); } getBoundingClientRect兼容性目前来说兼容性还是不错的，但是使用前还是查看一下caniuse比较好。

8.4K2 0

从0到1使用vite搭建react项目保姆级教程

一、vite创建react项目要使用Vite创建一个React项目，你需要按照以下步骤操作： 1、确保你已经安装了Node.js（建议使用最新的稳定版本）。...中的依赖包 npm run dev 8、现在，你应该拥有一个使用Vite创建并且配置了React的新项目。...安装完成之后我们可以看到package.json中多了 "react-vant": "^3.3.5", 即表示安装完成如何使用vant 中的组件呢，官方文档地址https://react-vant...语法 1、基础语法参考文档：React 官方中文文档 2、react进阶内置Hook Hook 可以帮助在组件中使用不同的 React 功能。...你可以使用内置的 Hook 或使用自定义 Hook。

5.7K1 1

GNE 版本升级，基于可视化信号自动化识别并提取新闻正文

GNE 输入的HTML，原本就是使用模拟浏览器输出的 HTML，并不是真正的网页源代码。既然如此，在使用模拟浏览器的时候，为什么不直接把每个节点的坐标信息都记录下来呢？...null element.setAttribute('is_visiable', is_visiable) if (is_visiable) { react...= element.getBoundingClientRect() coordinate = JSON.stringify(react) element.setAttribute...().right), 0) - document.body.getBoundingClientRect().x; return {...contentWidth), pageHeight: document.body.scrollHeight, screenWidth: window.screen.width

1.6K3 1

蜕变之始，useEffect 最后一种用法

在一些特殊的场景里，我们需要跳出数据驱动 UI 的解题思路，例如为了避免出现性能瓶颈，在高频率的事件监听中，我们会选择直接使用原生 DOM 节点来解决问题意思就是说，如果你想要跳出 React 的环境使用其他的方式开发...在一个复杂的项目中，我们可以使用 React 解决一部分逻辑，然后使用别的更合适的方案解决另外的问题，这样的灵活性提高了 React 项目的上限。...jQuery 我们也可以在这里放心使用百度地图 javaScript sdk，从而完整的在 react 项目中嵌入百度地图 function App() { // ......对于原生 DOM 而言，我们可以使用 getBoundingClientRect 来获取元素对象在可视区域中的位置信息本案例中的判断规则非常简单粗暴，因此当同屏出现两个目标元素时会存在规则冲突，实践中的规则设计会更细致一些...getBoundingClientRect().y if (n1y > 0 && n1y < window.innerHeight) { setCurrent(0) }

4421 0

FLIP，一种高端优雅但简单易用的前端动画思维

React 知命境第 45 篇，原创第 159 篇有一种能够快速实现复杂动画交互的动画思维 FLIP，为了介绍这个动画思维，我准备了三个案例，大家可以在上面的视频中观看。...该动画接口使用起来也比较简单，跟 keyframes 类似。...0, 0, 0)`}, {backgroundColor: `rgba(0, 0, 0, ${0.3})`} ], {duration: 600}) const rect = current.getBoundingClientRect...0px, 0px)', height: `${height}px`, width: `${width}px` } ], {duration: 600}) } 最后给每个元素添加点击事件...0, 0, ${0.3})`}, {backgroundColor: `rgba(0, 0, 0, 0)`} ], {duration: 600}) const rect = current.getBoundingClientRect

1.4K1 1

Note·React Hook

React Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。拥抱 React Hook 什么是 Hook？...Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用。什么时候使用 Hook？...如果你的 effect 返回一个函数，React 将会在执行清除操作时调用它。...return width } 为什么要在 effect 中返回一个函数？...使用 callback ref 可以获取 DOM： function MeasureExample() { const [height, setHeight] = useState(0) const

2.8K2 0

JavaScript进阶之实现拖拽

最近做到的react项目就有一个拖拽的需求，然后大概搜索了一下，找到了star比较高的react-dnd库，但是阅读react-dnd的官方文档还是有点难受的,因为概念性比较强，所以在介绍react-dnd...().left; let shiftY = event.clientY - ball.getBoundingClientRect().top; ball.style.position...HTML 拖放（Drag and Drop）拖拽事件 HTML 的 drag & drop 使用了 DOM event model 以及从mouse events 继承而来的 drag events...drag: 拖拽源 drop：拖拽源最终放置的目标 DataTransfer 对象：退拽对象用来传递的媒介，使用一般为Event.dataTransfer。...的概念有注意理解react-dnd库的api 举个例子?: <!

3.2K4 0

点击加载更多

你不知道的React Ref

逐步拆解React组件—Lazyload懒加载

图解浏览器的各种距离

Canvas 上实现坐标定位

这是一篇很好的互动式文章，Framer Motion 布局动画

useLayoutEffect的秘密

你这磨人的小妖精——选中文本并标注的实现过程

四个真秀React用法，你值得拥有

clientWidth，offsetWidth，scrollWidth你分的清吗

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

前端弹幕实现

懒加载 React 长页面 - 动态渲染组件

10.8 如何用js验证一下boz-sizing样式对块级盒子大小的影响？

js判断元素在某个区域内是否可见（转）

从0到1使用vite搭建react项目保姆级教程

GNE 版本升级，基于可视化信号自动化识别并提取新闻正文

蜕变之始，useEffect 最后一种用法

FLIP，一种高端优雅但简单易用的前端动画思维

Note·React Hook

JavaScript进阶之实现拖拽

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐