如何在React中动态地获得HTML元素宽度，即使是在调整页面大小时？

np8igboo 于 2022-12-02 发布在 React

关注(0)|答案(1)|浏览(276)

我想动态获取div元素的宽度。使用useRef，我可以获取div的宽度，但是当我调整页面大小时，宽度值不会自动更新。您能告诉我需要做什么来实现这一点吗？
下面是我在Codesandbox.io中输入的代码和概述：

import React from "react";
import "./styles.css";

const App = () => {
  const ref = React.useRef(null);
  const [width, setWidth] = React.useState(0);

  React.useEffect(() => {
    setWidth(ref.current.offsetWidth);
  }, [width]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div
        style={{
          border: "1px solid red"
        }}
        ref={ref}
      >
        Width: {width}
      </div>
    </div>
  );
};

export default App;

Html

来源：https://stackoverflow.com/questions/72822172/how-to-get-html-element-width-dynamically-even-on-page-resize-in-react

1条答案

按热度按时间

jjjwad0x1#

如下所示修改useEffect，这样就可以在调整页面大小时添加一个事件侦听器。

React.useEffect(() => {
    // when the component gets mounted
    setWidth(ref.current.offsetWidth); 
    // to handle page resize
    const getwidth = ()=>{
      setWidth(ref.current.offsetWidth);
    }
    window.addEventListener("resize", getwidth);
    // remove the event listener before the component gets unmounted
    return ()=>window.removeEventListener("resize", getwidth)
  }, []);

赞(0）回复(0）举报 2022-12-02

我来回答

如何在React中动态地获得HTML元素宽度，即使是在调整页面大小时？

1条答案

相关问题

热门标签

最新问答