反应虚拟化的自动sizer不起作用

Question

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

使用AutoSizer，行没有渲染。

它仅在我从代码中删除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>
            );
    }
}

P.S。位置道具是图像的数组

Answer 1

我尝试删除"反应 - 自动sizer"，并安装了" react-virtualized"

然后，

import {AutoSizer} from 'react-virtualized'; 

它有效！

，但我不想将反应窗口和反应性化在一起。

我希望此软件包的作者能够帮助解决此问题。

Answer 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>