Question

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

当我打电话给网格时，我不确定我是否做错了什么，或者如果我对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，就像您的代码段所示。

网格仅显示一列

1 个答案: