反应虚拟化列表滚动出视图答案

【问题标题】：React Virtualized List scrolling out of view反应虚拟化列表滚动出视图
【发布时间】：2016-12-25 18:41:08
【问题描述】：

我有一个可用的虚拟滚动网格，用于按页面上的部分显示文档。我现在为搜索结果添加了另一个 RV，但由于某种原因，当我向下滚动时，内容会滚动出视图！我试图将其简化为仅使用具有预定高度的列表并消除潜在因素，但它仍然给了我这个奇怪的错误。代码本身按预期工作，它是起作用的列表。（我实际上是使用 Cell Measurer 来获取行高，但即使使用以下版本，它也会起作用）。代码如下：

const rowRenderer = ({ index, isScrolling, style, key  }) => 
  this.resultRowRenderer(index, key, style, curList)

resultRowRenderer(index, key, style, list) {
  ...
  return <Markup content={quote} onClick={() => jumpToLocCallback(location)} />       
}

render() {
  ...
  const renderList = (curList, i) => {
    const rowCount = curList.results.length

    return (
      <List
        key={i}
        height={100}
        rowHeight={30}
        rowCount={rowCount}
        rowRenderer={rowRenderer}
        overscanRowCount={0}
        width={700}
        ref={(ref) => this.List = ref}
      />
    )
  }

  const renderLists = searchResultsLists.map(renderList)

  return (
    <div className='results-sidebar'>
      {renderLists}
    </div> 
  )
}

谢谢

【问题讨论】：

标签： reactjs react-virtualized

【解决方案1】：

但由于某种原因，当我向下滚动时，内容会滚动到视野之外！！

这几乎总是由缺少style 值引起的。（见here。）

在你的情况下，你应该改变这个：

resultRowRenderer(index, key, style, list) {
  quote = '...'
  return <Markup content={quote} onClick={() => jumpToLocCallback(location)} />
}

到这里：

resultRowRenderer(index, key, style, list) {
  quote = '...'
  return (
    <Markup
      content={quote}
      key={key}
      onClick={() => jumpToLocCallback(location)}
      style={style}
    />
  )
}

注意添加的key 和style 属性。 ;)

【讨论】：

哇，好神奇！我错过了样式标签！这太烦人了——我花了几个小时试图调试这个。谢谢
谢谢，不敢相信我花了几个小时尝试不同的东西来解决这个问题。