javascript 我怎样才能在样式化组件中得到一个元素的宽度?

kjthegm6  于 2023-03-11  发布在  Java
关注(0)|答案(1)|浏览(101)

由于元素可以根据其内容改变宽度,所以我不知道如何获得其px宽度。
下面是基本的简化结构:

// React component 

export const Navbar = ({ month }) => (
  <NavbarStyled>
    <div>
      <span>{month}</span>  //month is what varies in width
    </div>
  </NavbarStyled>
)
// NavbarStyled.js

export const NavbarStyled = styled.nav`
  ...

  span:after{
    ...  

    animation: show 1s ease forwards;
  }

  @keyframes show{
    100%{
      transform: translateX(the_element's_width_in_px);
    }
  }
`

我试过很多方法都没有结果。

谢谢

hfyxw5xn

hfyxw5xn1#

你可以使用getBoundingClientRect() function来获取宽度,它将返回元素属性的一个对象。对于样式化组件,你需要使用useRef钩子or another referencing method来引用元素,以便调用getBoundingClientRect()。

referencedElement.getBoundingClientRect()
// Return the width by calling referencedElement.getBoundingClientRect().width

相关问题