网格仅显示一列

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。

网格仅显示一列

Grid only displaying one Column

grid

react-virtualized