使用 react-virtualized 的簡單列表示例

Question

我正在嘗試使用“列表”顯示方法獲得一個非常簡單的“反應虛擬化”示例。

這是我到目前為止所擁有的（此處省略 html/css，因為它很簡單，完整示例請參見 codepen）：

https://codepen.io/darrengates/pen/eYMRbGr

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)
      
      // fake data
      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 的最簡單的例子。 在這個非常簡單的例子中我做錯了什么？

Answer 1

您沒有傳遞 rowRenderer 函數提供的style參數：

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