Reactjs Masonic React.js：左侧导航的宽度滚动问题

import*as React from'React'；
进口{
卡片
名片夹，
CardLink，
卡迪姆，
名片，
卡片文本，
}来自“反应带”；
从'@react hook/window size'导入{useWindowsSize}；
进口{
使用砖石，
使用定位器，
使用容器位置，
使用滚动条，
}来自共济会；
常量库=（{items}）=>{
const containerRef=React.useRef（null）；
让[windowWidth，height]=UseWindowsSize（）；
窗宽=窗宽-（0.3*窗宽）；
const{offset，width}=useContainerPosition（containerRef[
窗宽，
高度，
]);
常量定位器=使用定位器（{宽度，列间距：8}）；
常量{scrollTop，isScrolling}=UseColler（偏移量）；
常数自然卡=({
指数
数据：{image=''，displayName，description=''，link=''}，
宽度，
}) => (
{displayName}
{说明}
{link&&View}
);
返回(
{使用砖石({
定位器，
滚动顶，
伊斯克罗林，
高度，
containerRef，
项目:项目,，
超扫描：3，
第二行：10，
呈现：自然卡，
})}
);
};
导出默认库；

我使用的是共济会及以上的代码，但是我的数据在宽度而不是高度上被重新排列得非常奇怪

正在使用的库：

编辑：我认为问题在于如何检索我的项目

---

CodeSandbox在此：

我已经查看了您的代码sanbox和它的另一个

你的问题是：

• 如果使用

  usemarchise

  ，则必须为每个项目指定

  height

  属性。您可以看到，在上面的示例代码sanbox中，它为演示生成随机高度，并使用它通过

  style={{height:props.data.height}}

  为网格项应用样式
• 如果使用

  砌体

  构件，则必须指定

  columnWidth

  属性。换句话说，这种方法只是上述方法的一种，不同于指定

  宽度

  和

  高度

我的工作代码沙箱

您可以尝试在我的代码沙箱中使用两种方法来了解更多信息。顺便说一下，

@-ui/react

库也已弃用

---

我建议您可以研究的另一个库是

bricks.js

：

问题是，当浏览器获取图像时，卡的高度会发生变化，因此应该重新计算它们的位置。这是使用

useResizeObserver

完成的，它创建了一个调整大小的观察者，当对影响网格单元格高度的单元格进行突变时，该观察者将强制更新网格单元格位置。现在，无论何时调整组件大小，它都将正确渲染。初始渲染中还有另一个问题

width

为0，因此项目的位置不正确。在设置宽度之前，我一直使用

windowWidth

作为占位符

您可以在以下文档中查看：

阿斯纳河

答案是：

从“React”导入React；
从“react dom”导入react dom；
从“@react hook/window size”导入{useWindowsSize}”；
从“reactstrap”导入{Card，CardMg，CardText，CardTitle}；
从“/theme”导入{style}；
进口{
使用砖石，
使用定位器，
使用容器位置，
使用滚动条，
//导入这个
用户体验观察者
}来自“共济会”；
常量应用=（）=>{
const containerRef=React.useRef（null）；
让[windowWidth，windowHeight]=UseWindowsSize（）；
const{offset，width}=useContainerPosition（containerRef[
窗宽，
窗高
]);
//宽度等于windowWidth-滚动条宽度（17px铬合金）
console.log（宽度、窗口宽度）；
常数定位器=使用定位器({
//如果容器宽度为0会导致定位问题，请使用windowWidth作为占位符
//这在初始渲染时发生，然后将使用宽度
宽度：宽度| |窗宽，
栏位：10
});
//此挂钩创建一个调整大小的观察者，强制更新网格
//当影响细胞高度的细胞发生突变时的细胞位置。
常量resizeObserver=用户resizeObserver（定位器）；
常量{scrollTop，isScrolling}=UseColler（偏移量）；
返回(
{使用砖石({
定位器，
滚动顶，
伊斯克罗林，
高度：窗高，
containerRef，
项目:项目,，
呈现：自然卡，
//在这里使用它
resizeObserver
})}
);
};
常数自然卡=({
指数
数据：{image=”“，displayName，description=“Hello”，link=”“}，
宽度，
高度
}) => (
{displayName}
{说明}
);
常量头=（）=>{
//常量scrollY=UseWindowsScroll（5）；
返回(
是的，似乎图像的大小不同，这是问题的原因。您可以指定尺寸。我还建议使用“react Massey component”。是沙箱。我也尝试过@ParthShah不起作用，因为这是错误的。您使用的
Massey
组件使用
useResizeObserver
在引擎盖下，这就是它工作的原因。
height
在你的回答中是完全无用的。你看过
manstory
组件下面的注释代码了吗？使用height和使用
Masonary
组件不同。
Masonary
组件在引擎盖下使用
useResizeObserver
这就是它工作的原因。Se将
卡的高度
与
usebroush
匹配只会给卡提供固定高度，这不是最佳高度，因为图像具有di
import * as React from 'react';
    import {
      Card,
      CardBody,
      CardLink,
      CardImg,
      CardTitle,
      CardText,
    } from 'reactstrap';
    import {useWindowSize} from '@react-hook/window-size';
    import {
      useMasonry,
      usePositioner,
      useContainerPosition,
      useScroller,
    } from 'masonic';
    
    const Gallery = ({items}) => {
      const containerRef = React.useRef(null);
      let [windowWidth, height] = useWindowSize();
      windowWidth = windowWidth - (0.3*windowWidth);
      const {offset, width} = useContainerPosition(containerRef, [
        windowWidth,
        height,
      ]);
      const positioner = usePositioner({width, columnGutter: 8});
      const {scrollTop, isScrolling} = useScroller(offset);
    
      const NatureCard = ({
        index,
        data: {image = '', displayName, description = '', link = ''},
        width,
      }) => (
        <div>
          <Card>
            <CardImg src={image} />
            <CardTitle tag="h5">{displayName}</CardTitle>
            <CardText>{description}</CardText>
            {link && <CardLink href={link}>View</CardLink>}
          </Card>
        </div>
      );
    
      return (
        <div>
          {useMasonry({
            positioner,
            scrollTop,
            isScrolling,
            height,
            containerRef,
            items: items,
            overscanBy: 3,
            rowGutter: 10,
            render: NatureCard,
          })}
        </div>
      );
    };
    
    export default Gallery;