css - react中根据父容器的宽度渲染不同的html元素

Question

如果父 div 的宽度大于 125 像素，我必须显示徽标文本，如果父 div 的宽度小于 125 像素，我必须显示徽标图标。

但在整个过程中，实际窗口并没有调整大小。

CSS 媒体查询只能在屏幕调整大小事件期间触发。但在我的情况下，我必须触发一个屏幕大小保持不变且 div 宽度发生变化的事件。

我添加了颜色以更好地表示。

最初搜索栏将关闭，我有足够的空间来显示徽标文本，以便我可以显示它。

但是当我点击搜索图标时，搜索栏会扩大到一定的宽度，并且更少的空间可用于徽标文本，所以我想显示徽标图标。

像这样

目前我有一个变量searchBarActive，当搜索栏打开时设置为true，当搜索栏关闭时设置为false。

function Navbar() {

  const [searchBarMobileActive, setSearchBarMobileActive] = useState(false);

  return (
    <>
      <nav>
        {/* Navbar container */}
        <div className='nav-container'>
          {/* logo */}
          <div
            className={`logo ${searchBarMobileActive ? 'logo-icon' : ''}`}
          >
            <h4>{searchBarMobileActive ? <FaBirthdayCake /> : 'The Navbar'}</h4>   // This line is doing conditional rendering of logo text and logo icon
          </div>
        ... 

但是这种方法的问题在于，当搜索栏关闭时，searchBarMobileActive 变量会立即设置为 False。但是搜索栏会以一个小动画关闭，这需要一些时间，因此 logo 的父容器仍然很小，并且 logo 文本出现并开始溢出容器。

立即出现并溢出容器的徽标文本也溢出搜索栏并向下推

所以我想动态检查父 div 的宽度是 > 还是 < 125px 并进行条件渲染，而不是仅仅依赖 searchBarMobileActive 状态。

我尝试使用 useRef 获取父容器的宽度，但是由于宽度更改时不会重新渲染组件，因此似乎没有办法了。

标签： cssreactjs