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

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

然后

import {AutoSizer} from 'react-virtualized';

它有效！！

但是我不想让react-window和react-virtualized在一起。

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

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

1 个答案: