[英]React-Virtualized List skips rows when scrolling
I'm having an issue when I try to render a list of items as follows: 我尝试呈现如下项目列表时遇到问题:
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>
);
}
Now when I scroll down it skips every second list-item, until I end up with half the page empty but still scrollable. 现在,当我向下滚动时,它将跳过第二个列表项,直到最终我将一半的页面清空,但仍可滚动。
When scrolling up it's even worse, it skips half the page. 向上滚动时甚至更糟,它会跳过一半的页面。
AutoSizer
and CellMeasurer
seem to be working fine. AutoSizer
和CellMeasurer
似乎工作正常。 I stepped through the code a bit, and it looks like they do create the correct measurement. 我逐步浏览了一下代码,看起来它们确实创建了正确的度量。
My data is just a static array of objects. 我的数据只是对象的静态数组。 Not a promise or stream.
没有承诺或信息流。
I also changed my Datum
component a few times to make sure it's completely static markup but that didn't change anything. 我还几次更改了
Datum
组件,以确保它是完全静态的标记,但没有任何改变。
Any ideas anybody? 有任何想法吗?
[edit] [编辑]
Here's a Plunker showing my problem: https://plnkr.co/edit/2YJnAt?p=preview 这是显示我的问题的Plunker: https ://plnkr.co/edit/2YJnAt?p = preview
Ironically, while fiddling with it, I accidentally figured out what I had done wrong. 具有讽刺意味的是,在摆弄它的同时,我不小心发现了我做错了什么。 I'll submit an answer with my solution.
我将用解决方案提交答案。
Right, I found the problem (and so did @MBrevda! +1!) 是的,我发现了问题(@MBrevda也是如此!+1!)
The rowRenderer
method takes a style that needs to be applied to the rendered list element: https://plnkr.co/edit/FzPwLv?p=preview rowRenderer
方法采用需要应用于呈现的列表元素的样式: https : rowRenderer
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.