网格只显示一列

Question

我最近开始尝试使用 react-virtualized，但我从一开始就遇到了问题。我一直在尝试构建一个非常简单的网格，起初我加载了我的数据并且它不能正常工作，但我已经将它更改为一个简单的 4x4 网格，它仍然给我带来了问题。现在所有 16 个单元格都加载到一个列中，我尝试记录 rowIndex 和 columnIndex，这些都给了我正确的输出。

我不确定我调用 Grid 时是否做错了，或者我在使用 cellRenderer 时是否做错了，我非常感谢您对此的帮助。我的部分代码在下面。

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

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

Answer 1

您没有使用传递给渲染器的参数。例如，style 和 key 都被传递是有原因的，您必须使用它们。 （文档应该很清楚。）

换一种说法：

// Wrong:
function cellRenderer ({ columnIndex, key, rowIndex, style }) {
  return (
    <div>
      {columnIndex}
    </div>
  )
}
​
// Right:
function cellRenderer ({ columnIndex, key, rowIndex, style }) {
  return (
    <div
      key={key}
      style={style}
    >
      {columnIndex}
    </div>
  )
}

另外，如果您没有注意到，参数是 style 而不是 styles 就像您的代码 sn-p 显示的那样。