React-Virtualized List组件简单示例滚动无数据问题排查

我尝试使用react-virtualized的List组件实现一个极简展示示例，以下是目前已完成的代码（省略了简单的HTML/CSS）：

const { List } = ReactVirtualized
const generateRandomItem = (idx) => ({
   id: idx,
   name: faker.name.findName()
})

class App extends React.Component {
   constructor () {
      super()
      this.renderRow = this.renderRow.bind(this)
      
      // 生成模拟数据
      let items = []
      for (let i = 0, l = 1000; i < l; i++) {
         items.push(generateRandomItem(i))
      }
      this.state = {
         items: items
      }
   }
   
   renderRow({index, key}) {
      const item = this.state.items[index];
      return (
           <div>{item.name}</div>
      )
   }
   
   render () {      
      return (
         <div class="container">
            <h1>List Example</h1>
            <List
               width={600}
               height={300}
               rowHeight={40}
               rowCount={this.state.items.length}
               rowRenderer={this.renderRow}
            ></List>
         </div>
      )
   }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
)

滚动列表时，很快会发现列表下方的数据未正常显示在容器中，本该出现数据行的位置仅显示空白区域。这似乎是使用React Virtualized List组件的最简示例，请问我在这个示例中哪里出错了？

问题原因与修复方法 #

你忽略了rowRenderer方法中关键的style参数——React Virtualized的List组件是通过绝对定位计算并渲染可见区域内行元素的，必须将这个style参数传递给行容器，才能保证行元素被放置在正确位置。

同时，为了符合React列表渲染规范，需要把参数中的key传递给行元素。

修改后的renderRow方法如下：

renderRow({index, key, style}) {
  const item = this.state.items[index];
  return (
       <div key={key} style={style}>{item.name}</div>
  )
}

修改后滚动列表时，所有数据行都会被正确渲染到对应位置，不会再出现空白区域。

内容的提问来源于stack exchange，提问作者Darren Gates