0

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

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

具有讽刺意味的是，在摆弄它时，我意外地发现了我做错了什么。我将用我的解决方案提交答案。

4

1 回答 1

1

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

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

于 2016-12-05T18:59:09.147 回答