时间戳

首页 > 解决方案 > 如何在样式组件中以 px 为单位获取元素的宽度？

javascript - 如何在样式组件中以 px 为单位获取元素的宽度？

问题描述

由于元素可以根据其内容改变其宽度，我不知道如何以 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);
    }
  }
`

我已经尝试了很多没有结果的事情。

谢谢！

标签： javascriptcssreactjsstyled-components

解决方案

您可以使用getBoundingClientRect() 函数获取宽度，该函数将返回元素属性的对象。对于样式化的组件，您需要使用useRef挂钩或其他引用方法来引用元素，以便调用 getBoundingClientRect()。

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

推荐阅读