我想在画完一个动态div后得到它的宽度,但我不知道怎么画.

const ref=useRef();
useEffect(()=>{
console.log('REF',ref.current.offSetWidth)
},[])



return (
<div ref={ref}>


</div>

我试着打开windows .调整eventListener的大小,但仅当屏幕尺寸更改时才会触发.我的问题是,在一个div在屏幕上呈现后,它的宽度是多少?我并没有预先设置宽度,它只是将父元素的100%放在一个flex box中

推荐答案

您可以使用ResizeObserver,React的一个简单实现可以是这样的:

import {useRef, useEffect} from 'react'

export default function App() {
  const divRef = useRef()

  useEffect(() => {
    new ResizeObserver(() => {
      console.log('Width: ', divRef.current.clientWidth)
    }).observe(divRef.current)
  }, [])

  return (
    <div ref={divRef}>
    </div>
  );
}

Javascript相关问答推荐

类型错误:tasks.map不是函数(MERN堆栈)

React redux状态未在React-Router库中呈现

如何expose 像React在onChange、onClick等中所做的那样的参数?

我的YouTube视频没有以html形式显示,以获取免费加密信号

如何指定1条记录1个表?

使用续集和下拉栏显示模型属性

在页面上滚动 timeshift 动垂直滚动条

我开始使用/url?q=使用Cheerio

被CSS优先级所迷惑

jQuery提交按钮重新加载页面,即使在WordPress中使用preventDefault()

将状态向下传递给映射的子元素

XSLT处理器未运行

PDF工具包阿拉伯字体的反转数字

如何在ASP.NET项目中使用Google Chart API JavaScript将二次轴线值格式化为百分比

Angular 形式,从DOM中删除不会删除指定索引处的内容,但会删除最后一项

当用户点击保存按钮时,如何实现任务的更改?

如何在DYGRAPS中更改鼠标事件和键盘输入

FireBase云函数-函数外部的ENV变量

有没有办法通过使用不同数组中的值进行排序

Chart.js Hover线条在鼠标离开时不会消失