使用WindowScroller，AutoSizer和List无法在滚动条上呈现列表

问题描述

我想对AutoSizer和WindowScroller使用react-virtualized List。问题在于它不会滚动显示。换句话说，它仅在页面加载时呈现前x行+过扫描。

我已经看到人们会遇到相同的错误，但是即使采用不同的解决方案，结果也会相同。有人知道我是否想念什么吗？谢谢。

这是代码的一部分：

<div className={classes.missions}>
        <WindowScroller ref={setRef}>
          {({ height,isScrolling,registerChild,scrollTop,onChildScroll }) => (
            <div className={classes.WindowScrollerWrapper}>
            <AutoSizer disableHeight>
              {({ width }) => {
                
                const itemsPerRow = Math.floor(width / 500);
                const rowCount = Math.ceil(missionsstate.missions.length / itemsPerRow);
                return (
                  <div ref={registerChild}>
                    <List
                      autoHeight
                      onScroll={onChildScroll}
                      ref={registerChild}
                      isScrolling={isScrolling}
                      scrollTop={scrollTop}
                      className={classes.list}
                      width={width}
                      height={height}
                      rowCount={rowCount}
                      overscanRowCount={2}
                      rowHeight={500}
                      onRowsRendered={
                        ({ overscanStartIndex,overscanStopIndex,startIndex,stopIndex }) => {
                          /*console.log(height);
                          console.log('start index rendered: ' + startIndex);
                          console.log('stop index rendered ' + stopIndex);
                          console.log('overscan index rendered: ' + overscanStartIndex);
                          console.log('overscan index rendered ' + overscanStopIndex);*/
                        }
                      }
                      roWrenderer={
                        ({ index,key,style }) => {
                          const items = [];
                          const fromIndex = index * itemsPerRow;
                          const toIndex = Math.min(fromIndex + itemsPerRow,missionsstate.missions.length);
                          for (let i = fromIndex; i < toIndex; i++) {
                            items.push(
                              <div className={classes.element}>
                                <ElementList
                                  component={getComponentElementList(missionsstate.missions[i].imagePathType)}
                                  key={key + missionsstate.missions[i].name + missionsstate.missions[i].imagePathType}
                                  source={getSourceElementList(missionsstate.missions[i])}
                                  title={missionsstate.missions[i].name}
                                  onClick={handleOnClick(missionsstate.missions[i])}
                                />
                              </div>
                            )
                          }
                          console.log('rowCount: ' + rowCount);
                          console.log('fromIndex: ' + fromIndex);
                          console.log('toIndex: ' + toIndex);
                          console.log('items en esta fila: ' + items);
                          return (
                            <div
                              className={classes.row}
                              key={key}
                              style={style}
                            >
                              {items}
                            </div>
                          )
                        }
                      }
                    />
                    </div>
                )
              }}
              </AutoSizer>
              </div>
          )}
        </WindowScroller>
      </div>

解决方法

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

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

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