反应虚拟化自动大小调整器不起作用

Posted 2023-02-21

【中文标题】反应虚拟化自动大小调整器不起作用

【英文标题】：react virtualized auto sizer does not work

【发布时间】：2019-10-08 17:38:50

【问题描述】：

我一直在尝试这段代码，但它不起作用。

使用 AutoSizer，Row 不会被渲染。

只有当我从代码中删除 AutoSizer 时它才开始工作。

我不知道代码有什么问题，文档也没有帮助。

完整代码：

import React,  Component  from 'react';
import Card from './Card';
import  FixedSizeList as List  from "react-window";
import AutoSizer from "react-virtualized-auto-sizer";
import memoize from "memoize-one";

const CARD_SIZE = 340;

class CardList extends Component 

    getItemData = memoize((itemsPerRow, locations) => (
        itemsPerRow,
        locations
    ))

    render() 

        const  locations  = this.props;
        console.log(locations.length)


        const Row = ( data, index, style ) => 
            const  itemsPerRow, locations  = data;
            console.log(data)

            const items = [];
            const fromIndex = index * itemsPerRow;
            const toIndex = Math.min(fromIndex + itemsPerRow, locations.length);

            for (let i = fromIndex; i < toIndex; i++) 
                items.push(
                    <Card key=i location=locations[i] />
                    );
            
            return (
                <div className='flex-auto' style=style>
                items
                </div>
                );
        

        return (
            <div style= marginTop: "10px", height: "80%" >
            <AutoSizer>
            
                ( height, width ) => 
                    const itemsPerRow = Math.floor(width / CARD_SIZE) || 1;
                    const rowCount = Math.ceil(locations.length / itemsPerRow);
                    const itemData = this.getItemData(itemsPerRow, locations);

                    return (
                        <div>
                        <List
                        height=height
                        itemCount=rowCount
                        itemData=itemData
                        itemSize=CARD_SIZE
                        width=width
                        >
                         Row 
                        </List>
                        </div>
                        );
                
            
            </AutoSizer> 
            </div>
            );
    

附： location 道具是一个图像数组

【问题讨论】：

你能把它设为minimal reproducible example 吗？由于所有这些额外的未定义变量，很难复制真正的问题。

@evolutionxbox 好的，我已经粘贴了整个代码。

来自react-virtualized 的AutoSizer 是否与react-window 一起使用？

是的，它确实有效 =D

【参考方案1】：

我尝试删除“react-virtualized-auto-sizer”并安装了“react-virtualized”

那么，

import AutoSizer from 'react-virtualized'; 

它有效！

但我不想将 react-window 和 react-virtualized 放在一起。

我希望这个包的作者能帮助解决这个问题。

【讨论】：

考虑在github.com/bvaughn/react-virtualized 或github.com/bvaughn/react-window 上提出问题？

【参考方案2】：

可能是因为高度不兼容。您可以检查：

<div style= flex: '1 1 auto' , height: '100vh'>
            <AutoSizer>
                ( height, width ) => 
                   return (
                        <FixedSizeList
                            className="List"
                            height=height
                            itemCount=1000
                            itemSize=35
                            width=width
                        >
                            Row
                        </FixedSizeList>
                    )
                
            </AutoSizer>
            </div>