Estoy tratando de obtener un ejemplo muy simple de "reaccionar virtualizado" para que funcione usando el método de visualización "Lista".

Esto es lo que tengo hasta ahora (omitiendo html/css aquí porque es trivial, vea codepen para ver un ejemplo completo):

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') )

Si comienza a desplazarse hacia abajo en la lista, pronto verá que los datos "más abajo" la lista no aparece en el contenedor como debería; solo veo un espacio en blanco donde debería haber filas adicionales de datos.

Este parece ser el ejemplo más simple posible de React Virtualized usando List. ¿Qué estoy haciendo mal en este ejemplo tan simple?