React Window如何迭代数据？传入自定义渲染内容报错怎么解决

问题原因 #

1. react-window 的 FixedSizeList 组件要求子元素必须是行渲染函数，而非直接渲染完成的 JSX 元素数组。你传入Row时能正常运行，是因为你传入的是Row函数本身的引用，符合组件入参要求；而你传入AllRows()时加了括号执行了函数，返回的是已经生成好的 <div> 元素集合（属于JS对象类型），不符合要求因此触发类型错误。
2. 你的AllRows逻辑不符合虚拟滚动的设计：虚拟滚动只会渲染可视区域内的少量行，不需要你提前遍历所有数据生成所有行元素，List会自动根据可视区域的位置调用你传入的渲染函数生成对应行，全量遍历反而会失去虚拟滚动的性能优势。

修正方案 #

直接在行渲染函数中根据传入的index读取对应下标的数据即可，不需要单独提前遍历所有数据生成元素：

import { FixedSizeList as List } from 'react-window'
import AutoSizer from 'react-virtualized-auto-sizer'

const TrackTable = ({ tracks }) => {
    // 行渲染函数，接收List自动传入的index、style参数
    const Row = ({ index, style }) => {
        const currentItem = tracks[index];
        return (
            <div
                className={index % 2 ? 'ListItemOdd' : 'ListItemEven'}
                style={style}
            >
                {currentItem.code}
            </div>
        );
    };

    return (
        <AutoSizer>
            {({ height, width }) => (
                <List
                    className="List"
                    height={height}
                    itemCount={tracks.length}
                    itemSize={35}
                    width={width}
                >
                    {/* 直接传入渲染函数本身，不要加括号调用 */}
                    {Row}
                </List>
            )}
        </AutoSizer>
    );
};

如果你想把行渲染逻辑单独封装成名为AllRows的函数，写法和上面的Row完全一致，传入组件时也只需要传函数引用AllRows，不需要加括号执行。

内容的提问来源于stack exchange，提问作者angry kiwi