有没有办法在侧边栏关闭时调整共济会列的大小？

Question

我正在尝试在我的reactjs网站中实现砖石风格布局，我当前使用的包是masonic，在我尝试过的其他包中，它迄今为止效果最好，但我在调整大小时遇到问题当我打开然后重新关闭侧边栏时的列。

当我第一次打开侧边栏时，列的大小会调整大小以适合容器，但是当我重新关闭侧边栏时，列的大小不会调整大小以适合容器。

上面的示例显示，当侧边栏打开时，列的大小可以正确调整，但当侧边栏关闭时，列的大小却不能正确调整。

代码副本

import React, { useState, useEffect} from 'react'
import { Masonry, } from 'masonic';
import { useWindowSize } from '@react-hook/window-size';
import '../MasonryGridLayout.css';


export const GrideView = () => {
  const [isMobile, setIsMobile] = useState(false)
  const [refHeight, setheight] = useState(null)
  const [sideBar, setSideBar] = useState(false)
  const [windowWidth, height] = useWindowSize()

  const handleSidebar = () => {
    setSideBar(!sideBar)
    if (ref.current) {
      console.log('current')
    }
  }

  useEffect(() => {
    const handleMobile = () => {
      if (window.innerWidth <= 720) {
        setIsMobile(true)
      } else {
        setIsMobile(false)
      }
    }
    handleMobile()
  }, [])

  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column'
    }}>
      <div className='header-style'>
        <button style={{
          width: 'auto',
          height: '20px',
          backgroundColor: 'teal',
          color: 'white',
          marginLeft: '20px',
         
        }}
          onClick={handleSidebar}
        >
          toggle Sidebar
        </button>
        <button style={{
          width: 'auto',
          height: '20px',
          backgroundColor: 'tan',
          color: 'white',
          marginLeft: '20px',
         
        }}
        >
          Upload
        </button>
      </div>
      <div className="wrapper">
        {
          isMobile ? null : sideBar ? <div className='side-bar-style'>
            this is a side bar
          </div> : null
        }
        <div className='masonic' style={{ height: `${refHeight}` }}>
          <Masonry
            // Provides the data for our grid items
            items={items}
            // Adds 8px of space between the grid cells
            columnGutter={8}
            maxColumnCount={sideBar ? 7 : 8}
            columnCount={windowWidth < 600 && 2}
            // Sets the minimum column width to 172px
            columnWidth={172}
            // Pre-renders 5 windows worth of content
            overscanBy={2}
            // This is the grid item component
            render={FakeCard}
          />
        </div>

      </div>
    </div>
  );
}


const FakeCard = ({ data: { postID, post, description } }) => (
  <div className='card-style' style={{ height: `${description}` }}>
    <img
      className='img-style'
      alt="kitty"
      src={post}
    />
  </div>
);

如何在侧边栏关闭时使列正确调整大小？

Answer 1

您尝试过 useResizeObserver() 挂钩吗？

这个钩子创建一个调整大小观察器，强制更新网格 当细胞发生突变时，细胞的位置会影响其 高度。