Typescript 如何使用react virtualized创建具有响应列数的列表/网格？

我有一个“卡片”组件，它以固定的方式显示对象的数据

这些卡组件具有预定义的宽度和高度

这些卡片组件将列在一个列表中，我希望该列表能够利用可用的水平空间

我希望列的数量相应地改变。e、 g.如果父组件变得太窄，无法容纳3列，则应使用2列

从概念上讲，这是相当容易实现的。组件的大小是众所周知的，因此不需要动态测量大小，并且计算列表宽度中可以容纳的组件数量非常简单，列表宽度给出了列的数量

甚至可以选择使用

display:flex

，让它为您进行计算和布局

我目前正在尝试使用它来实现这个响应性专栏列表，因为我们已经在应用程序的其他情况下使用了它。它对虚拟化的支持也是一个强大的吸引因素

布局似乎提供了我们想要的，但我“无法让它工作”

它需要一个

CellMeasureCache

，它需要一个固定的宽度或高度。这是不幸的，因为我的组件有固定的宽度和高度，所以测量是不必要的

我对

CellMeasureCache

使用了

fixedWidth

，因为

cellPositioner

需要

columnWidth

，我认为最好不要更改

这是我的密码：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { RouteComponentProps } from 'react-router-dom';
import { AutoSizer, Masonry, WindowScroller, CellMeasurer, CellMeasurerCache, MasonryCellProps, createMasonryCellPositioner } from 'react-virtualized';
import { Task } from '../../store/tasks';
import { TaskCard } from './taskcard';

type TaskCardListProps = {
    scrollElement?: any;
    tasks: Task[];
};

type TaskCardListState = {};

export class TaskCardList extends React.Component<TaskCardListProps, TaskCardListState> {
    public render() {
        const { tasks, scrollElement } = this.props;

        const cache = new CellMeasurerCache({            
            defaultHeight: 120,
            defaultWidth: 400,
            fixedWidth: true
        });

        const cellPositioner = createMasonryCellPositioner({
            cellMeasurerCache: cache,
            columnCount: 2,
            columnWidth: 400,
            spacer: 10
        });

        const cellRenderer = (props: MasonryCellProps) => {
            const { index, key, parent, style } = props;
            const task = tasks[index];

            return (
                <CellMeasurer cache={cache} index={index} key={key} parent={parent}>
                    <TaskCard { ...task } />
                </CellMeasurer>
            )
        };

        return (
            <Masonry
                autoHeight={false}
                cellCount={tasks.length}
                cellMeasurerCache={cache}
                cellPositioner={cellPositioner}
                cellRenderer={cellRenderer}
                height={1000}
                width={1500}
            />
        );
    }
}

import*as React from'React'；
从“react dom”导入*作为react dom；
从'react router dom'导入{RouteComponentProps}；
从“react virtualized”（反应虚拟化）导入{AutoSizer、Masosh、WindowScroller、CellMeasurer、CellMeasureCache、MasonryCellProps、createMasonryCellPositioner}；
从“../../store/tasks”导入{Task}；
从“/TaskCard”导入{TaskCard}；
类型TaskCardListProps={
滚动元素？：任何；
任务：任务[]；
};
类型TaskCardListState={}；
导出类TaskCardList扩展React.Component{
公共渲染（）{
const{tasks，scrollElement}=this.props；
常量缓存=新的CellMeasureCache（{
默认高度：120，
默认宽度：400，
固定宽度：true
});
const cellPositioner=createMasonryCellPositioner({
CellMeasureCache:缓存，
列数：2，
列宽：400，
间隔棒：10
});
常量cellRenderer=（道具：MasonryCellProps）=>{
const{index，key，parent，style}=props；
const task=任务[索引]；
返回(
)
};
返回(
);
}
}

我发现它确实渲染了卡片，但只有一根柱子，并且应用了砌体构件

height:auto作为卡片组件元素的样式！这意味着它超过了我的固定高度，导致卡片变得不规则

我不知道为什么它只渲染一列，而不是两列

.ReactVirtualized\uuuu Mashiness
元素的高度为1000px，如
Massiness
组件上设置的，但它的子元素
ReactVirtualized\uuuuu Mashing\uu innerScrollContainer
的高度为
335px，我不知道为什么，但它“切断”了可以看到的卡片


我对砖石建筑有什么明显的错误吗

砌石是否是错误的选择，而且
react virtualized
中有更好的选项

我是不是想用锤子把钉子钉进去，我是不是应该从头做起

这些卡组件具有预定义的宽度和高度

所有卡片的宽度和高度都相同吗？如果是这样，则不需要使用
砌体
组件进行此操作。它适用于pinterest.com这样的用例。（实际上，我是专门为他们建造的。）

您所描述的内容不太复杂，因此可以以更有效的方式完成。使用
List
来构建您所描述的用户界面

如果每张卡的尺寸不同，则
砌体
是正确的组件

它需要一个
CellMeasureCache
，它需要一个固定的宽度或高度。这是不幸的，因为我的组件有固定的宽度和高度，所以测量是不必要的

不幸的是，这是事实。我专门为Pinterest的用例构建了
Mashiness
组件，并尝试尽可能地优化它，使其快速而非通用

这些卡组件具有预定义的宽度和高度

所有卡片的宽度和高度都相同吗？如果是这样，则不需要使用
砌体
组件进行此操作。它适用于pinterest.com这样的用例。（实际上，我是专门为他们建造的。）

您所描述的内容不太复杂，因此可以以更有效的方式完成。使用
List
来构建您所描述的用户界面

如果每张卡的尺寸不同，则
砌体
是正确的组件

它需要一个
CellMeasureCache
，它需要一个固定的宽度或高度。这是不幸的，因为我的组件有固定的宽度和高度，所以测量是不必要的

不幸的是，这是事实。我专门为Pinterest的用例构建了
Massy
组件，并尝试尽可能多地优化它，使其快速而非通用。
非常感谢您提供的示例，我的应用程序现在运行良好。非常感谢您提供的示例，我的应用程序现在运行良好。