React Virtualized Window Scroller 不呈现新行

问题描述

我试图在 react virualized 中跟踪窗口滚动条的 example，但似乎无法获得任何新行进行渲染 (See example)。

这是我写的代码：

const Row = ({ index,isScrolling,isVisible,key,style }) => {
    console.log(`Rendering row ${index}`);
    return tracks[index] ? (
      <TrackItem
        key={key}
        id={tracks[index].id}
        title={tracks[index].title}
        artist={tracks[index].artist}
        album={tracks[index].album}
        explicit={tracks[index].explicit}
        albumartKey={tracks[index].albumartUrl}
        trackKey={tracks[index].trackUrl}
        style={style}
      />
    ) : (
      <></>
    );
  };

  return (
    <div className="bg-white h-library-full-height">
      <Header trackCount={tracks.length} />
      <WindowScroller ref={windowScrollerRef}>
        {({ height,registerChild,onChildScroll,scrollTop }) => (
          <div className="flex-auto">
            <AutoSizer disableHeight>
              {({ width }) => (
                <div ref={registerChild}>
                  <List
                    className="outline-none"
                    ref={listRef}
                    autoHeight
                    height={height}
                    isScrolling={isScrolling}
                    onScroll={onChildScroll}
                    overscanRowCount={5}
                    rowCount={tracks.length}
                    rowHeight={48}
                    roWrenderer={Row}
                    scrollToIndex={scrollToIndex}
                    scrollTop={scrollTop}
                    width={width}
                  />
                </div>
              )}
            </AutoSizer>
          </div>
        )}
      </WindowScroller>
    </div>
  );

无论出于何种原因，该示例似乎在我的应用中不起作用。但是，当我使用没有附加 WindowScroller 的 AutoSizer 时，它确实有效。正在努力在此处查看问题。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）