Question

当我尝试按如下方式呈现项目列表时，我遇到了问题：

render()
{
  const data = (my data);

  const cellRenderer = ({index, key}) => (
    <li key={key}>
      <Datum data={data[index]} />
    </li>
  );

  return (
    <AutoSizer>
      {
        ({ width, height }) => (

          <CellMeasurer cellRenderer={ cellRenderer } 
                        columnCount={ 1 }
                        width={ width }
                        rowCount={ transactions.length }>
            {
              ({ getRowHeight }) => (
                <List height={ height }
                      overscanRowCount={ 50 }
                      noRowsRenderer={ () => (<div> Nix! </div>) }
                      rowCount={ transactions.length }
                      rowHeight={ getRowHeight }
                      rowRenderer={ cellRenderer }
                      width={ width } />
              )
            }
          </CellMeasurer>
        )
      }
    </AutoSizer>
  );
}

现在，当我向下滚动时，它会跳过每一个列表项，直到我最终将页面的一半空，但仍然可以滚动。

当向上滚动时，它会跳过一半的页面。

AutoSizer和CellMeasurer似乎工作正常。我稍微介绍了一下代码，看起来他们确实创建了正确的测量值。

我的数据只是一个静态的对象数组。不是承诺或流。

我还更改了Datum组件几次以确保它完全静态标记，但这并没有改变任何内容。

任何想法？

[编辑]

这是一个显示我的问题的Plunker：https://plnkr.co/edit/2YJnAt?p=preview

具有讽刺意味的是，在摆弄它时，我不小心弄清楚我做错了什么。我将用我的解决方案提交答案。

Answer 1

是的，我发现了问题（@ MBrevda也是如此！+1！）

rowRenderer方法采用需要应用于渲染列表元素的样式：https://plnkr.co/edit/FzPwLv?p=preview

React-Virtualized List在滚动时跳过行

1 个答案: