Question

我正在尝试使用useRef()来获取响应图像的大小，以便可以在其他地方制作相同大小的其他图像。但是，它没有获得ref.current的正确数据。

我目前有

  const [iconWidth, setIconWidth] = useState(0); 
  const ref = useRef();


  useEffect(() => {
    console.log("Ref: ", ref);
    console.log("Client Width: ", ref.current.clientWidth);
    setIconWidth(ref.current.clientWidth)
  })

  return (
    <Fragment>

      <div className="small-div">
        <img src={imagePath} className='img-fluid' ref={ref}/>
      </div>

      <div className="large-div">
        ... other content that I want the same size images
      </div>

    </Fragment>
  )

奇怪的是，我从console.log得到了

// Logging `ref`
Ref : {current: img.img-fluid.border}
  current: img.img-fluid.border
    ...
    clientWidth: 56

// Logging `ref.current.clientWidth`
Client Width : 0

因此，显然在主ref对象中看到了正确的信息，但是只有当我尝试使用ref.current.clientWidth访问它时，它才错误并显示0。

我尝试将ref移到div上，并为useEffect设置了不同的触发器，但是它仍然没有显示正确的数据。

要完成这项工作，我需要做些不同的事情吗？还是有更好的方法来获取元素的大小？

反应useRef（）没有显示有关ref.current的正确信息

0 个答案: