Question

尝试以多个项目并排的方式以类似Flexbox的方式（断点）呈现最多400个项目的列表 - 具体取决于可用的宽度。

我正在使用material-ui组件，并且由于性能问题不得不开始使用react-virtualized。每个项目都是一小部分UI，它还可以通过一些编辑功能进行扩展/折叠。

我一直试图（误）使用（反应虚拟化）表并动态计算列数（基于屏幕宽度）并将我的项目洒在每个网格单元格上。我似乎无法让Columns在一行上彼此相邻 - 我必须做一些非常简单的非常错误的事情。看了一下样本，但与我的代码相比，我看不出任何明显的差异。

我宁愿使用现有的flexbox（或网格）css服务来实现这一点。我只是不知道如何将它集成到虚拟列表/表中。

以下是我尝试render表的一些代码，但我希望摆脱它并使用一些flexbox魔术代替：

<div style={{height: "100%"}}>
    <AutoSizer>
        {({height, width}) => {
            this.grid = new GridCalc(this.props.items.length, width);

            return (
                <Table 
                    disableHeader={true}
                    rowCount={this.grid.rowCount}
                    rowGetter={this.getRow}
                    height={height}
                    width={width}
                    rowHeight={80}   <= this also has to be dynamic
                >
                    {this.grid.columns.map((value: number, index: number) => 
                        this.renderColumn(index, value))}
                </Table>
                );
            }}
    </AutoSizer>
</div>

renderColumn看起来像这样：

<Column
    key={colIndex}
    dataKey={colIndex}
    width={width}
    cellRenderer={this.renderCell}
    cellDataGetter={this.getCellData}
/>

renderCell被删除以消除复杂性：

<div>{props.cellData.name}</div>

getRow返回行上每个项目的切片对象数组，getCellData方法从特定单元格的（子）数组中选择正确的对象。这些对象存储在Redux存储中，并通过普通的redux - connect调用附加到控件。

如果您需要查看具体的代码/详细信息，请与我们联系。

渲染反应虚拟化的并排项目列表

0 个答案: