使用react-virtualized时Grid仅显示单列的问题求助

嘿，我一眼就瞅出问题所在啦！你写的_cellRenderer里漏掉了最关键的一步——没有把传入的styles参数应用到渲染的div上！

react-virtualized的Grid组件是靠内置的绝对定位样式来排布每个单元格位置的，这些定位规则全部包含在styles参数里。你现在只渲染了单元格内容，没加这个样式，所有单元格都会默认挤在左上角，看起来就变成单列了——虽然rowIndex和columnIndex输出是对的，但位置完全没被控制住。

另外，别忘了给每个单元格加上key属性，这是React列表渲染的硬性要求，还能避免控制台的警告。

修改后的_cellRenderer应该是这样的：

_cellRenderer({ columnIndex, key, rowIndex, styles }) {
  return <div key={key} style={styles}> {columnIndex} </div>;
}

还有个小建议：你现在给Grid直接传了固定的width={400}和height={400}，虽然能正常工作，但如果想让Autosizer的自动适配功能发挥作用，外层的div最好设置一个明确的高度，比如：

render(){
  return(
    <div style={{ height: '400px' }}>
      <Autosizer>
        {({ width, height }) => (
          <Grid
            cellRenderer={this._cellRenderer}
            columnCount={4}
            columnWidth={30}
            rowCount={4}
            rowHeight={30}
            width={width}
            height={height}
          />
        )}
      </Autosizer>
    </div>
  );
}

这样Autosizer就能根据外层容器的尺寸自动调整Grid的大小啦～

内容的提问来源于stack exchange，提问作者Kevin Yao